import React from 'react';

const AboutSection: React.FC = () => {
  return (
    <section className="py-24 px-6 md:px-12 lg:px-24 bg-white">
      <div className="max-w-7xl mx-auto">
        <div className="mb-8">
          <h3 className="text-[#f97316] font-bold tracking-widest uppercase text-xl mb-2 relative inline-block">
            ABOUT
            <span className="absolute -bottom-2 left-0 w-full h-1 bg-[#f97316]"></span>
          </h3>
          <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-[#1e3a8a] mt-6 mb-8">
            Rajalakshmi Institute of Technology (RIT)
          </h2>
        </div>
        
        <div className="flex flex-col lg:flex-row gap-12 items-start">
          <div className="lg:w-1/2 text-gray-700 leading-relaxed text-lg text-justify">
            <p className="mb-4">
              Rajalakshmi Institute of Technology ( An Autonomous Institution) is one of the best engineering colleges in Chennai and is part of Rajalakshmi Institutions, which has been synonymous with providing excellence in higher education to students for many years.
            </p>
            <p className="mb-4">
              Rajalakshmi Institute of Technology was established in 2008. RIT is accredited with highest grade of A++ by NAAC. RIT is affiliated with Anna University Chennai. It is one of the <a href="#" className="text-blue-500 hover:underline">AICTE-approved colleges in Chennai</a> New Delhi, and also offers NBA-approved courses.
            </p>
          </div>
          <div className="lg:w-1/2 w-full">
            <img 
              src="https://cache.careers360.mobi/media/presets/720X480/colleges/social-media/media-gallery/3425/2021/6/16/DSC05418.JPG" 
              alt="Rajalakshmi Institute of Technology" 
              className="w-full h-auto object-cover shadow-lg"
              referrerPolicy="no-referrer"
            />
          </div>
        </div>

        {/* Graduate Programmes Section */}
        <div className="mt-24">
          <h2 className="text-3xl md:text-4xl font-bold text-[#1e3a8a] text-center mb-16">
            Graduate Programmes offered
          </h2>

          <div className="flex flex-col lg:flex-row gap-12 items-start">
            <div className="lg:w-1/2 w-full">
              <img 
                src="https://ritchennai.org/img/image/slider-m-3.jpg" 
                alt="RIT Students" 
                className="w-full h-auto object-cover shadow-lg rounded-lg"
                referrerPolicy="no-referrer"
              />
            </div>
            
            <div className="lg:w-1/2 w-full space-y-8">
              <div>
                <h3 className="text-xl font-bold text-[#1e3a8a] mb-4">UG Programmes</h3>
                <ul className="space-y-2 text-gray-700 list-disc pl-5 marker:text-[#f97316]">
                  <li>B.E. Computer Science & Engineering</li>
                  <li>B.E. Computer Science & Engineering(AI&ML)</li>
                  <li>B.E. Computer & Communication Engineering</li>
                  <li>B.E. Electronics & Communication Engineering</li>
                  <li>B.E. Mechanical Engineering</li>
                  <li>B.E. Electronic Engineering (VLSI)</li>
                  <li>B.Tech. Artificial Intelligence & Data Science</li>
                  <li>B.Tech. Computer Science and Business Systems</li>
                  <li>B.Tech Bio Technology</li>
                </ul>
              </div>

              <div>
                <h3 className="text-xl font-bold text-[#1e3a8a] mb-4">PG Programmes</h3>
                <ul className="space-y-2 text-gray-700 list-disc pl-5 marker:text-[#f97316]">
                  <li>M.E. Electronics and Communication Engineering (VLSI Design)</li>
                </ul>
              </div>

              <div>
                <h3 className="text-xl font-bold text-[#1e3a8a] mb-4">Anna University Approved Research Institute</h3>
                <p className="text-gray-700">
                  Ph.D. Programmes are offered across all Engineering, Technology, Science & Humanities disciplines
                </p>
              </div>
            </div>
          </div>
        </div>

        {/* Campus Life & Events Section */}
        <div className="mt-24">
          <h2 className="text-3xl md:text-4xl font-bold text-[#1e3a8a] text-center mb-16">
            Campus Life & Events
          </h2>
          
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
            {/* Left Column: YouTube Videos */}
            <div className="flex flex-col gap-8">
              <div className="w-full rounded-xl overflow-hidden shadow-lg aspect-video">
                <iframe 
                  className="w-full h-full"
                  src="https://www.youtube.com/embed/5_L5JMb-a5k" 
                  title="RAJALAKSHMI INSTITUTE OF TECHNOLOGY" 
                  frameBorder="0" 
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
                  allowFullScreen
                ></iframe>
              </div>
              <div className="w-full rounded-xl overflow-hidden shadow-lg aspect-video">
                <iframe 
                  className="w-full h-full"
                  src="https://www.youtube.com/embed/RfMkWSZHw5o" 
                  title="Inauguration of The Grover Centre for Quantum Computing" 
                  frameBorder="0" 
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
                  allowFullScreen
                ></iframe>
              </div>
            </div>

            {/* Right Column: Instagram Post */}
            <div className="w-full h-full min-h-[600px] rounded-xl overflow-hidden shadow-lg bg-white flex items-center justify-center">
               <iframe 
                 className="w-full h-full"
                 src="https://www.instagram.com/p/DCs0891p6HY/embed" 
                 frameBorder="0" 
                 scrolling="no" 
                 allowtransparency="true"
               ></iframe>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default AboutSection;