"use client";

import { motion } from "framer-motion";
import { Home, Star, Key, BarChart2, BookOpen } from "lucide-react";

export default function PremiumServices() {
  const services = [
    {
      icon: <Home className="w-6 h-6" />,
      title: "Tailored Recommendations",
      description: "Property selections matching your unique lifestyle and investment goals",
    },
    {
      icon: <Star className="w-6 h-6" />,
      title: "Exclusive VIP Access",
      description: "Priority access to off-market and premium listings",
    },
    {
      icon: <Key className="w-6 h-6" />,
      title: "Dedicated Consultant",
      description: "Your personal luxury property expert guiding every step",
    },
    {
      icon: <BarChart2 className="w-6 h-6" />,
      title: "Full-Service Solutions",
      description: "End-to-end services: buying, selling, rentals, and management",
    },
    {
      icon: <BookOpen className="w-6 h-6" />,
      title: "Educational Resources",
      description: "Insights and tools for buyers, sellers, and investors",
    },
  ];

  return (
    <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
      <div className="max-w-7xl mx-auto">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          viewport={{ once: true }}
          className="text-center mb-12"
        >
          <h2 className="text-3xl font-bold text-gray-900">
            <span className="text-blue-600">Premium</span> Services
          </h2>
          <p className="mt-4 text-lg text-gray-600 max-w-2xl mx-auto">
            Experience real estate redefined with our exclusive offerings
          </p>
        </motion.div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {services.map((service, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: index * 0.1 }}
              viewport={{ once: true }}
              className="group bg-gray-50 p-6 rounded-xl border border-gray-200 hover:border-blue-200 transition-all hover:shadow-lg"
            >
              <div className="flex items-center mb-4">
                <div className="p-3 rounded-full bg-blue-100 text-blue-600 group-hover:bg-blue-600 group-hover:text-white transition-colors">
                  {service.icon}
                </div>
                <h3 className="ml-4 text-xl font-semibold text-gray-800">{service.title}</h3>
              </div>
              <p className="text-gray-600 pl-16">{service.description}</p>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}
