import React from 'react';
import { MapPin, Phone, Mail, Building } from 'lucide-react';

const ContactSection: React.FC = () => {
  return (
    <section className="py-24 px-6 md:px-12 lg:px-24 bg-white min-h-screen">
      <div className="max-w-7xl mx-auto">
        <div className="mb-16 text-center">
          <h3 className="text-[#f97316] font-bold tracking-widest uppercase text-xl mb-2 relative inline-block">
            CONTACT US
            <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">
            Get in Touch
          </h2>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
          {/* Contact Info */}
          <div className="space-y-12">
            {/* College Address */}
            <div className="bg-gray-50 p-8 rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
              <div className="flex items-center gap-4 mb-6">
                <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center text-[#1e3a8a]">
                  <Building size={24} />
                </div>
                <h3 className="text-2xl font-bold text-[#1e3a8a]">College</h3>
              </div>
              
              <div className="space-y-4 text-gray-700">
                <div className="flex items-start gap-3">
                  <MapPin size={20} className="text-[#f97316] mt-1 shrink-0" />
                  <p className="leading-relaxed">
                    Rajalakshmi Institute of Technology,<br />
                    Poonamallee, Chennai - 600 124.
                  </p>
                </div>
                
                <div className="flex items-start gap-3">
                  <Phone size={20} className="text-[#f97316] mt-1 shrink-0" />
                  <p>
                    91 44 6718 1600 / 91 44 6718 1601 /<br />
                    8925977445
                  </p>
                </div>
                
                <div className="flex items-start gap-3">
                  <Mail size={20} className="text-[#f97316] mt-1 shrink-0" />
                  <a href="mailto:mail@ritchennai.edu.in" className="hover:text-[#f97316] transition-colors">
                    mail@ritchennai.edu.in
                  </a>
                </div>
              </div>
            </div>

            {/* Administrative Office */}
            <div className="bg-gray-50 p-8 rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
              <div className="flex items-center gap-4 mb-6">
                <div className="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center text-[#f97316]">
                  <Building size={24} />
                </div>
                <h3 className="text-2xl font-bold text-[#1e3a8a]">Administrative Office</h3>
              </div>
              
              <div className="space-y-4 text-gray-700">
                <div className="flex items-start gap-3">
                  <MapPin size={20} className="text-[#f97316] mt-1 shrink-0" />
                  <p className="leading-relaxed">
                    #69, New Avadi Road, Kilpauk,<br />
                    Chennai - 600 010.
                  </p>
                </div>
                
                <div className="flex items-start gap-3">
                  <Phone size={20} className="text-[#f97316] mt-1 shrink-0" />
                  <div className="space-y-1">
                    <p>Tel : 91 44 2644 2472</p>
                    <p>91 44 2646 1316</p>
                    <p>91 44 2646 0124</p>
                  </div>
                </div>
                
                <div className="flex items-start gap-3">
                  <Mail size={20} className="text-[#f97316] mt-1 shrink-0" />
                  <a href="mailto:mail@ritchennai.edu.in" className="hover:text-[#f97316] transition-colors">
                    mail@ritchennai.edu.in
                  </a>
                </div>
              </div>
            </div>
          </div>

          {/* Map */}
          <div className="h-full min-h-[500px] rounded-2xl overflow-hidden shadow-lg border border-gray-200">
            <iframe 
              width="100%" 
              height="100%" 
              frameBorder="0" 
              scrolling="no" 
              marginHeight={0} 
              marginWidth={0} 
              src="https://maps.google.com/maps?q=Rajalakshmi%20Institute%20of%20Technology&t=&z=13&ie=UTF8&iwloc=&output=embed"
              title="Rajalakshmi Institute of Technology Map"
              className="w-full h-full"
            ></iframe>
          </div>
        </div>
      </div>
    </section>
  );
};

export default ContactSection;