import React from 'react';
import { motion } from 'motion/react';
import { Maximize, Building2, Layers, Home } from 'lucide-react';

const features = [
  { icon: <Home size={32} />, title: '3.5 & 4 BHK', subtitle: 'Premium Homes' },
  { icon: <Maximize size={32} />, title: '5 Acres', subtitle: 'Of Luxury' },
  { icon: <Building2 size={32} />, title: '4 Towers', subtitle: 'High-Rise' },
  { icon: <Layers size={32} />, title: '22 Storeys', subtitle: 'Building' },
];

export default function About() {
  return (
    <section id="overview" className="py-32 bg-gray-50 overflow-hidden">
      <div className="container mx-auto px-4">
        <div className="flex flex-col lg:flex-row items-center gap-20">
          <motion.div 
            initial={{ opacity: 0, x: -50 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 1, ease: "easeOut" }}
            className="lg:w-1/2"
          >
            <div className="relative">
              <img 
                src="https://www.legacylifespaces.com/wp-content/uploads/2025/05/kairos-thumb-1024x512.webp" 
                alt="Legacy Kairos Overview" 
                className="rounded-3xl shadow-2xl w-full object-cover aspect-[4/3] border-4 border-white"
              />
            </div>
          </motion.div>

          <motion.div 
            initial={{ opacity: 0, x: 50 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 1, ease: "easeOut", delay: 0.2 }}
            className="lg:w-1/2"
          >
            <h2 className="text-4xl md:text-6xl font-serif mb-8 leading-tight text-gray-900">
              4x Space For Your<br /><span className="italic text-primary">Elevated Living</span>
            </h2>
            <p className="text-gray-500 mb-12 text-xl font-light leading-relaxed">
             At <a href="https://www.legacylifespaces.com" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">Legacy</a> Kairos, there’s space for everyone you love and everything you cherish. These spacious homes in Pune offer thoughtfully planned layouts and modern amenities, that make them the perfect mix of luxury living, comfort, and connectivity.
            </p>

            <div className="grid grid-cols-2 gap-8">
              {features.map((feature, idx) => (
                <div key={idx} className="flex items-start gap-5">
                  <div className="text-primary mt-1 bg-white p-3 rounded-2xl shadow-sm border border-gray-100">
                    {feature.icon}
                  </div>
                  <div>
                    <h4 className="font-serif text-2xl mb-1 text-gray-900">{feature.title}</h4>
                    <p className="text-gray-400 text-xs uppercase tracking-widest font-medium">{feature.subtitle}</p>
                  </div>
                </div>
              ))}
            </div>

            <div className="mt-14">
              <button onClick={() => window.dispatchEvent(new Event('open-enquiry'))} className="inline-flex items-center justify-center px-10 py-4 border border-primary text-primary hover:bg-primary hover:text-white rounded-full font-medium transition-all duration-300 cursor-pointer hover:shadow-xl hover:-translate-y-1">
                Download Brochure
              </button>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
}
