import { Link } from "react-router-dom";
import { motion } from "framer-motion";
import { ArrowRightIcon, CheckCircleIcon } from "@heroicons/react/24/outline";
import { Button, Card } from "../../components/UI";
import { ScrollDownArrow } from '../../components/UI/ScrollDownArrow';

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">
      {/* 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 }}
                  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={{ delay: 0.2 }}
                  className="text-xl text-neutral-100 mb-8"
                >
                  Професионални лабораториски услуги со најсовремена опрема и
                  експертиза
                </motion.p>
                <motion.div
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.4 }}
                  className="flex gap-4"
                >
                  <Button
                    to="/contact"
                    variant="primary"
                    size="lg"
                    className="bg-white text-primary-600 hover:bg-neutral-100"
                  >
                    Контактирајте нѐ
                  </Button>
                  <Button
                    to="/about"
                    variant="outline"
                    size="lg"
                    className="text-white border-white hover:bg-white/10"
                  >
                    Дознајте повеќе
                  </Button>
                </motion.div>
              </div>
            </div>
            <div className="flex justify-center mb-12">
              <ScrollDownArrow targetId="services-section" />
            </div>
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section id="services-section" className="bg-neutral-50 py-24 h-screen">
        <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-3 gap-8">
            {serviceCards.map((card) => (
              <Link
                key={card.title}
                to={card.link}
                className="group"
              >
                <Card
                  className="h-full hover:-translate-y-1 transition-all duration-300"
                  padding="none"
                >
                  <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-neutral-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-neutral-700">
                          <CheckCircleIcon className="h-5 w-5 text-primary-500 mr-2" />
                          {service}
                        </li>
                      ))}
                    </ul>
                    <div className="mt-4 flex items-center text-primary-600 font-semibold">
                      Дознајте повеќе
                      <ArrowRightIcon className="h-5 w-5 ml-2 group-hover:translate-x-2 transition-transform duration-300" />
                    </div>
                  </div>
                </Card>
              </Link>
            ))}
          </div>
        </div>
      </section>

      
    </div>
  );
}

