import { NavLink } from "react-router-dom";
import { motion } from "framer-motion"; // You'll need to install framer-motion
import { ArrowRightIcon, CheckCircleIcon } from "@heroicons/react/24/outline";
import { SectionHeader } from "../../shared/SectionHeader";
const serviceCards = [
  {
    title: "Лабораториски услуги",
    description: "Професионални лабораториски испитувања со најсовремена опрема",
    image: "labfinal.webp",
    link: "/lab",
    services: [
      "Испитување на бетон",
      "Геотехнички испитувања",
      "Испитување на челик",
      "Испитување на руди, метали и троски",
      "Лабораториска екстракција од руди и троски"
    ]
  },
  {
    title: "Ултразвучни испитувања",
    description: "Неразорувачки испитувања со најсовремена ултразвучна опрема",
    image: "wallscener.jpeg",
    link: "/ultrasound",
    services: [
      "Испитување на заварени споеви",
      "Дебелометрија",
      "Испитување на дефекти",
      "Контрола на квалитет",
      "Анализа и известување"
    ]
  },
  {
    title: "Консалтинг услуги",
    description: "Експертски совети и консултации во градежништвото",
    image: "consulting2.jpg",
    link: "/consulting",
    services: [
      "Градежно советување",
      "Проектен менаџмент",
      "Надзор на градба",
      "Техничка документација",
      "Анализа на материјали"
    ]
  }
];

export default function Home() {
  return (
    <div className="min-h-screen bg-gradient-to-b from-cyan-900 to-cyan-400">
      {/* Hero Section with Parallax */}
      <div className="relative h-[90vh] 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 }}
              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={{ delay: 0.2 }}
              className="text-xl text-gray-200 mb-8"
            >
              Професионални лабораториски услуги со најсовремена опрема и експертиза
            </motion.p>
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.4 }}
              className="flex gap-4"
            >
              <NavLink
                to="/contact"
                className="bg-blue-500 hover:bg-blue-600 text-white px-8 py-3 rounded-full font-semibold transition-colors duration-300"
              >
                Контактирајте нѐ
              </NavLink>
              <NavLink
                to="/services"
                className="bg-white/10 hover:bg-white/20 text-white px-8 py-3 rounded-full font-semibold transition-colors duration-300"
              >
                Дознајте повеќе
              </NavLink>
            </motion.div>
          </div>
        </div>
      </div>

      {/* Stats Section */}
      {/* <div className="container mx-auto px-4 py-16 ">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
          {[
            { number: "15+", label: "Години искуство" },
            { number: "1000+", label: "Задоволни клиенти" },
            { number: "5000+", label: "Завршени проекти" },
            { number: "100%", label: "Задоволство" },
          ].map((stat) => (
            <div key={stat.label} className="text-center">
              <div className="text-4xl font-bold text-white mb-2">{stat.number}</div>
              <div className="text-white">{stat.label}</div>
            </div>
          ))}
        </div>
      </div> */}

      {/* Services 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">
          {/* <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
              Нашите Услуги
            </h2>
            <div className="w-24 h-1 bg-blue-500 mx-auto"></div>
          </div> */}
          <SectionHeader
            title="Нашите Услуги"
            subtitle="Нашиот тим е спремен да ви помогне со нашите услуги"
            className="text-white"
          /> 
          <div className="grid grid-cols-1  md:grid-cols-3 gap-10">
            {serviceCards.map((card) => (
              <NavLink
                key={card.title}
                to={card.link}
                className="group bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1"
              >
                <div className="relative h-56 overflow-hidden">
                  <img
                    src={card.image}
                    alt={card.title}
                    className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
                  <h3 className="absolute bottom-4 left-4 text-xl font-semibold text-white">
                    {card.title}
                  </h3>
                </div>
                <div className="p-6">
                  <p className="text-gray-600 mb-4">{card.description}</p>
                  <ul className="space-y-2">
                    {card.services.slice(0, 3).map((service, index) => (
                      <li
                        key={index}
                        className="flex items-center text-gray-700"
                      >
                        <CheckCircleIcon className="h-5 w-5 text-blue-500 mr-2" />
                        {service}
                      </li>
                    ))}
                  </ul>
                  <div className="mt-4 flex items-center text-blue-500 font-semibold">
                    Дознајте повеќе
                    <ArrowRightIcon className="h-5 w-5 ml-2 group-hover:translate-x-2 transition-transform duration-300" />
                  </div>
                </div>
              </NavLink>
            ))}
          </div>
        </div>
      </div>

      {/* Featured Projects/Clients */}
      <div className="container mx-auto px-4 py-24">
        <div className="text-center mb-16">
          <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
            Наши Клиенти
          </h2>
          <div className="w-24 h-1 bg-blue-500 mx-auto mb-8"></div>
          <p className="text-white text-xl max-w-2xl mx-auto">
            Горди сме на довербата која ни ја укажуваат нашите клиенти
          </p>
        </div>

        <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
          {/* Add client logos here */}
          {[1, 2, 3, 4].map((index) => (
            <div
              key={index}
              className="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300"
            >
              <img
                src={`/client-${index}.png`}
                alt={`Client ${index}`}
                className="w-full h-20 object-contain grayscale hover:grayscale-0 transition-all duration-300"
              />
            </div>
          ))}
        </div>
      </div>

      {/* CTA Section */}
      <div className="bg-blue-600 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>
  );
}