import React from 'react';

const AccreditationsSection: React.FC = () => {
  // No longer needed: list of individual logos replaced by a single unified picture.
  // const accreditations = [...];

  return (
    <section className="py-20 bg-white/50 backdrop-blur-sm rounded-[2rem] shadow-xl border border-white/20 my-12 overflow-hidden relative">
      <div className="absolute inset-0 bg-gradient-to-br from-blue-50/50 via-transparent to-orange-50/50 pointer-events-none"></div>
      
      <div className="max-w-7xl mx-auto px-8 relative z-10">
        <div className="text-center mb-12">
          <h2 className="text-sm font-black text-[#f97316] uppercase tracking-[0.3em] mb-3">Our Strategic Partners</h2>
          <h3 className="text-3xl md:text-4xl font-serif text-[#1e3a8a] font-bold">Global Accreditations & Collaborations</h3>
          <div className="w-20 h-1 bg-gradient-to-r from-[#f97316] to-orange-400 mx-auto mt-6 rounded-full"></div>
        </div>

        <div className="flex justify-center items-center">
          <div className="relative w-full max-w-5xl mx-auto px-4">
            <img 
              src="https://raw.githubusercontent.com/Sachin-627/RIT-COLLABORATORS-PIC/main/Screenshot%202026-04-01%20120832.png" 
              alt="Global Accreditations & Collaborations" 
              className="w-full h-auto object-contain rounded-2xl shadow-lg border border-white/20 transition-transform duration-500 hover:scale-[1.01]"
              referrerPolicy="no-referrer"
            />
          </div>
        </div>
      </div>
    </section>
  );
};

export default AccreditationsSection;