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

export default function Pricing() {
  return (
    <section id="pricing" className="py-32 bg-white">
      <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">Configurations</h4>
          <h2 className="text-4xl md:text-6xl font-serif mb-6 text-gray-900">Choice of 3.5 & 4 BHK</h2>
          <p className="text-gray-500 text-xl font-light">
            Apartments designed to ensure abundant sunlight and breeze with space optimization.
          </p>
        </div>

        <div className="max-w-5xl mx-auto">
          <motion.div 
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8, ease: "easeOut" }}
            className="bg-white rounded-[2rem] shadow-[0_20px_50px_rgba(0,0,0,0.05)] overflow-hidden border border-gray-100"
          >
            <div className="bg-gray-900 text-white p-8 text-center relative overflow-hidden">
              <div className="absolute inset-0 bg-primary/10" />
              <h3 className="text-3xl font-serif relative z-10">View Price Break-up</h3>
            </div>
            <div className="p-0 overflow-x-auto">
              <table className="w-full text-left border-collapse">
                <thead>
                  <tr className="bg-gray-50 border-b border-gray-100">
                    <th className="p-8 font-serif text-xl text-gray-800">Configuration</th>
                    <th className="p-8 font-serif text-xl text-gray-800">Carpet Area</th>
                    <th className="p-8 font-serif text-xl text-gray-800">Price Range</th>
                    <th className="p-8 font-serif text-xl text-gray-800 text-right">Action</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="border-b border-gray-100 hover:bg-gray-50 transition-colors group">
                    <td className="p-8 font-medium text-xl text-gray-900">3.5 BHK Premium</td>
                    <td className="p-8 text-gray-500 text-lg">1274 - 1297 Sq.Ft</td>
                    <td className="p-8 font-medium text-primary text-xl">₹ 1.65 - 1.78 Cr*</td>
                    <td className="p-8 text-right">
                      <button onClick={() => window.dispatchEvent(new Event('open-enquiry'))} className="inline-block bg-white border border-gray-200 hover:border-primary text-gray-900 hover:text-primary px-8 py-3 rounded-full text-sm font-medium transition-all duration-300 cursor-pointer shadow-sm group-hover:shadow-md">
                        Price Breakup
                      </button>
                    </td>
                  </tr>
                  <tr className="hover:bg-gray-50 transition-colors group">
                    <td className="p-8 font-medium text-xl text-gray-900">4 BHK Luxury</td>
                    <td className="p-8 text-gray-500 text-lg">1591 - 1610 Sq.Ft</td>
                    <td className="p-8 font-medium text-primary text-xl">₹ 2.05 - 2.25 Cr*</td>
                    <td className="p-8 text-right">
                      <button onClick={() => window.dispatchEvent(new Event('open-enquiry'))} className="inline-block bg-white border border-gray-200 hover:border-primary text-gray-900 hover:text-primary px-8 py-3 rounded-full text-sm font-medium transition-all duration-300 cursor-pointer shadow-sm group-hover:shadow-md">
                        Price Breakup
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </motion.div>
          
          <div className="mt-10 flex flex-wrap justify-center gap-8 text-sm text-gray-500 uppercase tracking-wider font-medium">
            <div className="flex items-center gap-2"><Check size={18} className="text-primary" /> RERA Registered</div>
            <div className="flex items-center gap-2"><Check size={18} className="text-primary" /> Vastu Compliant</div>
            <div className="flex items-center gap-2"><Check size={18} className="text-primary" /> Premium Finishes</div>
          </div>
        </div>
      </div>
    </section>
  );
}
