import React from 'react';
import { motion } from 'motion/react';

const AboutHubSection: React.FC = () => {
  return (
    <section className="w-full bg-[#F9FAFB] py-20 px-6 md:px-12 lg:px-20 overflow-hidden">
      <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
        
        {/* Left Side: Image & Floating Card */}
        <div className="relative w-full h-[500px] lg:h-[600px] group perspective-1000">
          <motion.img 
            initial={{ opacity: 0, x: -50 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8, ease: "easeOut" }}
            viewport={{ once: true }}
            src="https://cache.careers360.mobi/media/presets/720X480/colleges/social-media/media-gallery/3425/2021/6/16/DSC08602.JPG" 
            alt="RIT Campus Collaboration" 
            className="w-full h-full object-cover rounded-3xl shadow-2xl transition-transform duration-700 group-hover:scale-[1.02]"
          />
          
          {/* Floating Card */}
          <motion.div 
            initial={{ opacity: 0, y: 50, scale: 0.9 }}
            whileInView={{ opacity: 1, y: 0, scale: 1 }}
            whileHover={{ y: -5 }}
            transition={{ duration: 0.6, delay: 0.3, type: "spring", stiffness: 100 }}
            viewport={{ once: true }}
            className="absolute -bottom-6 -right-6 md:bottom-10 md:-right-10 bg-[#2D3748] text-[#f97316] p-6 md:p-8 rounded-xl shadow-xl max-w-[280px] z-10 border-l-4 border-[#f97316]"
          >
            <p className="text-xl md:text-2xl font-serif font-bold leading-tight tracking-wide">
              INNOVATION
            </p>
            <p className="text-sm md:text-base text-gray-300 mt-2 font-medium">
              Where creativity meets execution. Fueling the future of tech.
            </p>
          </motion.div>
        </div>

        {/* Right Side: Content */}
        <div className="flex flex-col justify-center space-y-8">
          <motion.div 
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            viewport={{ once: true }}
            className="space-y-4"
          >
            <h4 className="text-[#f97316] font-serif tracking-widest text-sm font-bold uppercase">
              Our Legacy
            </h4>
            <h2 className="text-4xl md:text-5xl lg:text-6xl font-serif text-[#2D3748] leading-tight">
              What is <span className="italic text-[#f97316]">RIT EVENTS HUB?</span>
            </h2>
          </motion.div>

          <motion.p 
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.4 }}
            viewport={{ once: true }}
            className="text-[#2D3748] text-lg leading-relaxed max-w-xl"
          >
            The RIT Events Hub is your centralized gateway to campus life, designed to simplify how you discover and participate in events. Whether it's a technical hackathon, a cultural fest, or a workshop, our platform brings everything to your fingertips. With seamless registration, real-time updates, and personalized recommendations, we ensure you never miss an opportunity to learn, compete, and grow. Join a community where accessing innovation is as easy as a single click.
          </motion.p>
        </div>

      </div>
    </section>
  );
};

export default AboutHubSection;