import React from 'react';
import { motion } from 'motion/react';
import { CheckCircle2 } from 'lucide-react';

const specifications = [
  {
    title: "Structure, Painting & Water-proofing",
    items: [
      "Earthquake-resistant RCC frame structure for external walls.",
      "RCC Mivan structure for external walls.",
      "ACC block for internal walls.",
      "Designer elevation.",
      "Weather-proof acrylic good quality texture paint for external walls.",
      "Gypsum-finish surface to walls in common lobbies."
    ]
  },
  {
    title: "Common Areas",
    items: [
      "Designer entrance lobby.",
      "Individual branded elevator with DG back-up for building.",
      "Well-planned Geberit plumbing & drainage system.",
      "PV solar panel with net metering.",
      "LED lights in common areas with DG back-up.",
      "Rainwater harvesting.",
      "Firefighting system for the building as per PCMC norms."
    ]
  },
  {
    title: "Electrical & Intercom",
    items: [
      "Video door phone with intercom.",
      "Limited DG backup for apartments.",
      "Concealed fire-resistant copper wiring.",
      "Branded modular switches & sockets. (Havells/Schneider/Legrand)",
      "TV points in living & bedrooms.",
      "AC points in living & bedrooms.",
      "Taps & points for washing machine & dishwasher."
    ]
  },
  {
    title: "Flooring & Tiles",
    items: [
      "Natural Italian marble flooring with matching skirting in the entire apartment.",
      "Designer Dado 600 x 1200 tiles in bathroom up to lintel level & in kitchen for 2' above platform height.",
      "Ceramic tiles in terrace and utility area.",
      "Good quality artificial /granite window sills."
    ]
  },
  {
    title: "Doors, Windows & Grills",
    items: [
      "Designer veneer-finish main door.",
      "Digital lock at main door.",
      "Laminated bedroom doors with wood/granite/marble frames.",
      "Mortise locks for all internal doors.",
      "3-Track aluminium windows with mesh.",
      "2-Track kitchen aluminium windows.",
      "Bathroom louvres."
    ]
  },
  {
    title: "Plumbing & Sanitary Ware",
    items: [
      "CPVC / UPVC plumbing.",
      "SWR drainage system.",
      "Branded sanitary ware.",
      "Standard CP Fittings",
      "Standard Sanitary fixtures"
    ]
  },
  {
    title: "Common Facilities",
    items: [
      "Security cabin with intercom facility.",
      "Centralised Tata Sky DTH connection."
    ]
  },
  {
    title: "Painting and Finishes",
    items: [
      "OBD paint on internal walls.",
      "Gypsum-finish surface to walls of the entire apartment."
    ]
  }
];

export default function Specifications() {
  return (
    <section id="specifications" className="py-24 bg-white">
      <div className="container mx-auto px-4 max-w-7xl">
        <div className="text-center max-w-3xl mx-auto mb-16">         
          <h2 className="text-4xl md:text-5xl font-serif mb-6 text-gray-900">Specifications & Features</h2>
          <p className="text-gray-500 text-xl font-light">
            Discover everything about what goes into shaping your 4x living in Rahatni
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {specifications.map((spec, idx) => (
            <motion.div
              key={idx}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: idx * 0.1, duration: 0.5 }}
              className="bg-gray-50 rounded-3xl p-8 border border-gray-100 hover:shadow-lg transition-shadow duration-300"
            >
              <h3 className="text-2xl font-serif mb-6 text-gray-900 leading-tight">
                {spec.title}
              </h3>
              <ul className="space-y-4">
                {spec.items.map((item, i) => (
                  <li key={i} className="flex items-start gap-3">
                    <CheckCircle2 className="w-5 h-5 text-primary shrink-0 mt-0.5" />
                    <span className="text-gray-600 font-light leading-relaxed">{item}</span>
                  </li>
                ))}
              </ul>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}
