import { useEffect } from 'react';

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

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="container mx-auto px-4 py-12">
        {/* Header */}
        <div className="mt-8 mb-16 text-center">
          <h1 className="text-3xl md:text-4xl font-semibold capitalize text-gray-800 mb-4">
            во нашата лабораторија се вршат
          </h1>
          <div className="w-24 h-1 bg-blue-500 mx-auto"></div>
        </div>

        {/* Main Content */}
        <div className="space-y-16">
          {/* Concrete Testing Section */}
          <div className="flex flex-col md:flex-row items-center gap-8 md:gap-16">
            <div className="w-full md:w-1/2 p-8 bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300">
              <h2 className="text-2xl font-bold text-gray-800 mb-4">
                Испитувањето на бетон
              </h2>
              <div className="space-y-4 text-gray-600">
                <p>
                  е важен процес кој се користи за да се оцени квалитетот и издржливоста на бетонски конструкции.
                </p>
                <p>
                  Испитувањето на бетонот е неопходен процес за осигурување на квалитет и безбедност на градежните проекти и инфраструктурата воопшто. 
                  Тоа помага во отстранивање на недостатоците и намалување на ризиците од евентуални пропаднувања на конструкциите.
                </p>
              </div>
            </div>
            <div className="w-full md:w-1/2">
              <img 
                src="/kocki.webp" 
                alt="Испитување на бетон" 
                loading="lazy"
                className="rounded-xl shadow-lg w-full h-[400px] object-cover hover:scale-105 transition-transform duration-300" 
              />
            </div>
          </div>

          {/* Ore and Metal Testing Section */}
          <div className="flex flex-col md:flex-row-reverse items-center gap-8 md:gap-16">
            <div className="w-full md:w-1/2 p-8 bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300">
              <h2 className="text-2xl font-bold text-gray-800 mb-4">
                Испитувањето на руди, метали и троски
              </h2>
              <div className="space-y-4 text-gray-600">
                <p>
                  е важен процес во областа на геолошкото и металуршко инженерство, со цел да се анализираат и одредат својствата и составот на суровините и производите.
                </p>
                <p>
                  Овие испитувања се изведуваат за да се осигура квалитетот и спецификациите на материјалите, како и за да се обезбеди безбедно и ефикасно користење и обработка на руди, метали и троски во различни индустрии и апликации.
                </p>
              </div>
            </div>
            <div className="w-full md:w-1/2">
              <img 
                src="/lab.webp" 
                alt="Испитување на руди и метали" 
                loading="lazy"
                className="rounded-xl shadow-lg w-full h-[400px] object-cover hover:scale-105 transition-transform duration-300" 
              />
            </div>
          </div>

          {/* Steel Testing Section */}
          <div className="flex flex-col md:flex-row items-center gap-8 md:gap-16">
            <div className="w-full md:w-1/2 p-8 bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300">
              <h2 className="text-2xl font-bold text-gray-800 mb-4">
                Испитувањето на челик
              </h2>
              <div className="space-y-4 text-gray-600">
                <p>
                  е важен процес за одредување на квалитетот, издржливоста и други механички својства на челикот, кој се користи во разни индустрии и конструкции.
                </p>
                <p>
                  Испитувањето на челик е неопходен процес за да се обезбеди квалитетот и безбедноста на производите и конструкциите кои го користат, како и за да се уверите дека челикот одговара на спецификациите и стандардите.
                </p>
              </div>
            </div>
            <div className="w-full md:w-1/2">
              <img 
                src="/armatura.jpg" 
                alt="Испитување на челик" 
                loading="lazy"
                className="rounded-xl shadow-lg w-full h-[400px] object-cover hover:scale-105 transition-transform duration-300" 
              />
            </div>
          </div>

          {/* Laboratory Extraction Section */}
          <div className="flex flex-col md:flex-row-reverse items-center gap-8 md:gap-16">
            <div className="w-full md:w-1/2 p-8 bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300">
              <h2 className="text-2xl font-bold text-gray-800 mb-4">
                Лабораториската екстракција
              </h2>
              <div className="space-y-4 text-gray-600">
                <p>
                  на метали или неметали од руди и троски е процес кој се користи за да се изолираат и оддели материјалите од суровините или отпадните производи, како што се рудите или троските, со цел да се добие чист метал или неметал.
                </p>
              </div>
            </div>
            <div className="w-full md:w-1/2">
              <img 
                src="/geotehnika.webp" 
                alt="Лабораториска екстракција" 
                loading="lazy"
                className="rounded-xl shadow-lg w-full h-[400px] object-cover hover:scale-105 transition-transform duration-300" 
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}