import React from 'react';
import { ShieldCheck, Sparkles, Droplets, Wrench } from 'lucide-react';
import { motion } from 'motion/react';

const highlights = [
  {
    icon: <ShieldCheck size={32} strokeWidth={1.5} />,
    title: 'Construction Quality',
    desc: 'Earthquake-resistant RCC frame structure with Mivan technology. Built to last generations with uncompromised safety standards.',
    color: 'bg-[#fdfbf9]',
    img: 'https://www.legacylifespaces.com/wp-content/uploads/2025/06/kairos-ext4.webp'
  },
  {
    icon: <Sparkles size={32} strokeWidth={1.5} />,
    title: 'Hassle-Free Living',
    desc: 'Thoughtfully designed spaces for a seamless everyday experience. Enjoy a life where every detail is taken care of.',
    color: 'bg-[#f5f0ea]',
    img: 'https://www.legacylifespaces.com/wp-content/uploads/2025/06/kairos-int2.webp'
  },
  {
    icon: <Droplets size={32} strokeWidth={1.5} />,
    title: 'Advanced Plumbing',
    desc: 'Premium Geberit plumbing systems for leak-free longevity, ensuring your home remains pristine year after year.',
    color: 'bg-[#eee5d9]',
    img: 'https://www.legacylifespaces.com/wp-content/uploads/2025/06/kairos-int5.webp'
  },
  {
    icon: <Wrench size={32} strokeWidth={1.5} />,
    title: 'Low Maintenance',
    desc: 'Smart design and premium materials ensuring minimal upkeep costs, giving you more time to enjoy life.',
    color: 'bg-[#e6dac7]',
    img: 'https://www.legacylifespaces.com/wp-content/uploads/2025/06/kairos-ext7.webp'
  }
];

export default function Highlights() {
  return (
    <section className="py-32 bg-white relative">
      <div className="container mx-auto px-4">
        <div className="text-center max-w-3xl mx-auto mb-20">
          <h4 className="text-primary font-medium tracking-[0.2em] uppercase mb-4 text-sm">Why Choose Us</h4>
          <h2 className="text-4xl md:text-6xl font-serif mb-6 text-gray-900">The <a href="https://www.legacylifespaces.com" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">Legacy</a> Advantage</h2>
          <p className="text-gray-500 text-xl font-light">
            Discover the pillars of excellence that make Legacy Kairos the perfect choice for your family.
          </p>
        </div>

        <div className="relative max-w-5xl mx-auto pb-32">
          {highlights.map((item, index) => (
            <div 
              key={index}
              className="sticky w-full"
              style={{ 
                top: `calc(15vh + ${index * 40}px)`, 
                zIndex: index,
                marginBottom: index === highlights.length - 1 ? '0' : '50vh'
              }}
            >
              <motion.div 
                initial={{ opacity: 0, y: 50 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true, margin: "-100px" }}
                transition={{ duration: 0.5 }}
                className={`w-full ${item.color} rounded-[2.5rem] shadow-2xl overflow-hidden border border-white/60 flex flex-col md:flex-row min-h-[450px] transform-gpu`}
              >
                <div className="p-10 md:p-16 flex flex-col justify-center md:w-1/2">
                  <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-white text-primary mb-8 shadow-sm">
                    {item.icon}
                  </div>
                  <h3 className="text-3xl md:text-4xl font-serif mb-4 text-gray-900">{item.title}</h3>
                  <p className="text-gray-600 text-lg leading-relaxed">{item.desc}</p>
                </div>
                <div className="md:w-1/2 h-64 md:h-auto relative">
                  <img 
                    src={item.img} 
                    alt={item.title} 
                    className="absolute inset-0 w-full h-full object-cover"
                  />
                </div>
              </motion.div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
