import { useEffect } from 'react';
import { motion } from 'framer-motion';
import { Card } from '../UI/Card';
import { ScrollDownArrow } from '../UI/ScrollDownArrow';

export default function Lab() {
  useEffect(() => {
    window.scrollTo({ top: 0, behavior: "smooth" })
  }, [])

  const scrollToContent = () => {
    const contentSection = document.getElementById('services-section');
    contentSection?.scrollIntoView({ behavior: 'smooth' });
  };

  const labServices = [
    {
      title: "Испитувањето на бетон",
      description: [
        "е важен процес кој се користи за да се оцени квалитетот и издржливоста на бетонски конструкции.",
        "Испитувањето на бетонот е неопходен процес за осигурување на квалитет и безбедност на градежните проекти и инфраструктурата воопшто. Тоа помага во отстранивање на недостатоците и намалување на ризиците од евентуални пропаднувања на конструкциите."
      ],
      image: "/kocki.webp",
      alt: "Испитување на бетон"
    },
    {
      title: "Испитувањето на руди, метали и троски",
      description: [
        "е важен процес во областа на геолошкото и металуршко инженерство, со цел да се анализираат и одредат својствата и составот на суровините и производите.",
        "Овие испитувања се изведуваат за да се осигура квалитетот и спецификациите на материјалите, како и за да се обезбеди безбедно и ефикасно користење и обработка на руди, метали и троски во различни индустрии и апликации."
      ],
      image: "/lab.webp",
      alt: "Испитување на руди и метали"
    },
    {
      title: "Испитувањето на челик",
      description: [
        "е важен процес за одредување на квалитетот, издржливоста и други механички својства на челикот, кој се користи во разни индустрии и конструкции.",
        "Испитувањето на челик е неопходен процес за да се обезбеди квалитетот и безбедноста на производите и конструкциите кои го користат, како и за да се уверите дека челикот одговара на спецификациите и стандардите."
      ],
      image: "/armatura.jpg",
      alt: "Испитување на челик"
    },
    {
      title: "Лабораториската екстракција",
      description: [
        "на метали или неметали од руди и троски е процес кој се користи за да се изолираат и оддели материјалите од суровините или отпадните производи, како што се рудите или троските, со цел да се добие чист метал или неметал."
      ],
      image: "/geotehnika.webp",
      alt: "Лабораториска екстракција"
    }
  ];

  return (
    <div className="min-h-screen bg-neutral-50">
      {/* Hero Section */}
      <section className="relative bg-gradient-to-br from-primary-900 to-primary-700">
        <div className="absolute inset-0 bg-black/20" />
        <div className="relative container-base h-screen flex items-center justify-center">
          <div className="flex flex-col items-center">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8 }}
              className="max-w-3xl mx-auto text-center"
            >
              <h1 className="text-4xl md:text-5xl font-display font-bold text-white mb-6">
                Во нашата лабораторија се вршат
              </h1>
              <div className="w-24 h-1 bg-white/30 mx-auto mb-8"></div>
              <p className="text-xl text-neutral-100">
                Професионални испитувања со најсовремена опрема и стручен тим
              </p>
            </motion.div>

            <ScrollDownArrow targetId="services-section" />
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section id="services-section" className="py-24">
        <div className="container-base">
          <div className="space-y-24">
            {labServices.map((service, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: index * 0.1 }}
                className={`flex flex-col ${index % 2 === 0 ? 'md:flex-row' : 'md:flex-row-reverse'} items-center gap-8 md:gap-16`}
              >
                <div className="w-full md:w-1/2">
                  <Card className="h-full hover:shadow-xl transition-shadow duration-300">
                    <div className="p-8">
                      <h2 className="text-2xl font-display font-bold text-neutral-900 mb-6">
                        {service.title}
                      </h2>
                      <div className="space-y-4">
                        {service.description.map((paragraph, idx) => (
                          <p key={idx} className="text-neutral-600 leading-relaxed">
                            {paragraph}
                          </p>
                        ))}
                      </div>
                    </div>
                  </Card>
                </div>
                <div className="w-full md:w-1/2">
                  <motion.div
                    whileHover={{ scale: 1.02 }}
                    transition={{ duration: 0.3 }}
                  >
                    <img 
                      src={service.image}
                      alt={service.alt}
                      loading="lazy"
                      className="rounded-xl shadow-lg w-full h-[400px] object-cover"
                    />
                  </motion.div>
                </div>
              </motion.div>
              
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}