import {
  FaCarSide,
  FaWifi,
  FaSwimmingPool,
  FaUtensils,
  FaMagic,
  FaBolt,
  FaTableTennis,
  FaRoad,
  FaChild,
  FaShuttleVan,
  FaPaw,
  FaShieldAlt,
  FaWheelchair,
  FaDumbbell,
  FaMountain,
  FaFootballBall,
  FaLandmark,
} from "react-icons/fa";

import { MdElectricRickshaw } from "react-icons/md";
import {
  GiVacuumCleaner, GiCampfire, GiTempleGate,
} from "react-icons/gi";

const services = [
  {
    title: "Parking & Guest Movement",
    description:
      "Parking capacity for 500+ vehicles, ensuring hassle-fee access for all guests. VIP entry & logistics support.",
    icon: FaCarSide,
  },
  {
    title: "24x7 Hour Housekeeping",
    description:
      "Round-the-clock housekeeping ensuring cleanliness, comfort, and prompt assistance.",
    icon: GiVacuumCleaner,
  },
  {
    title: "Secure Wi-Fi",
    description:
      "Stay connected with secure Wi-Fi, perfect for weddings, events, and comfortable stays.",
    icon: FaWifi,
  },
  {
    title: "Heritage & Cultural Experiences",
    description:
      "Experience the charm of heritage and nature with farm visits, tractor rides, nature walks, temple visits, and authentic village-inspired experiences, offering guests a unique and memorable stay.",
    icon: FaLandmark,
  },
  {
    title: "Two Swimming Pools",
    description:
      "Enjoy a luxurious, refreshing experience with our 40 ft and 20 ft swimming pools. A true luxury resort with a swimming pool near Pune, ideal for weekend getaways and grand celebrations.",
    icon: FaSwimmingPool,
  },
  {
    title: "Catering & Culinary Services",
    description:
      "Multi-cuisine menus with live counters and customized options, served by on-panel professional caterers.",
    icon: FaUtensils,
  },
  {
    title: "Decor & Event Production",
    description:
      "On-panel decorators provide event decor, ready-made stages, theme-based designs, and support for stage setups, entrances, and special effects.",
    icon: FaMagic,
  },
  {
    title: "Power Backup & Technical Support",
    description:
      "24x7 power backup with genset support, ensuring seamless execution of exhibitions, conferences, and live performances.",
    icon: FaBolt,
  },
  {
    title: "Indoor Games",
    description:
      "Entertainment options including chess, carrom, table tennis, darts, Dance and Activities.",
    icon: FaTableTennis,
  },
  {
    title: "Outdoor Games",
    description:
      "Enjoy outdoor games like cricket, volleyball, badminton, basketball, and cycling.",
    icon: FaFootballBall,
  },
  {
    title: "Paths for Grand Celebrations",
    description:
      "Well-planned internal roads designed to ensure smooth baraat processions and grand celebratory parades.",
    icon: FaRoad,
  },
  {
    title: "Children's Play Area",
    description:
      "A dedicated play area for children, ideal for family vacations and event celebrations.",
    icon: FaChild,
  },
  {
    title: "Shuttle Services",
    description:
      "The resort offers paid shuttle services through trusted vendors, arranged as per guest requirements, ensuring a comfortable and hassle-free travel experience.",
    icon: FaShuttleVan,
  },
  {
    title: "Pet-Friendly",
    description:
      "Enjoy a memorable stay with your furry companions, as our resort welcomes pets with open arms. Pet-friendly property (as per policy).",
    icon: FaPaw,
  },
  {
    title: "Safety Security & Guest Assistance",
    description:
      "Your safety is a top priority, with round-the-clock security personnel and surveillance for a secure environment.",
    icon: FaShieldAlt,
  },
  {
    title: "Wheelchair Available on Request",
    description:
      "Wheelchairs are available on request, ensuring a comfortable and accessible stay at our disabled-friendly resort near Pune.",
    icon: FaWheelchair,
  },
  {
    title: "Outdoor GYM",
    description:
      "Our outdoor gym allows guests to exercise amidst fresh air, lush greenery, and scenic surroundings, ensuring a refreshing and rejuvenating experience.",
    icon: FaDumbbell,
  },
  {
    title: "Buggy Service",
    description:
      "Our Buggy Service for Guest Convenience ensures guests can move around the resort effortlessly and comfortably.",
    icon: MdElectricRickshaw,
  },
  {
    title: "Serene & Peaceful Environment",
    description:
      "Our resort offers a serene and peaceful environment surrounded by natural greenery, creating the perfect setting for relaxation, reflection, and meaningful celebrations.",
    icon: FaMountain,
  },
  {
    title: "Bonfire Experience",
    description:
      "Enjoy a cozy bonfire experience arranged as per the guest’s request, creating the perfect setting for relaxed evenings, conversations, and memorable moments with friends and family.",
    icon: GiCampfire,
  },
];

export default function Services() {
  return (
    <section
      className="
        relative
        overflow-hidden
        bg-gradient-to-b
        from-[#fdfbf7]
        via-[#faf5ec]
        to-white
        py-20
        md:py-30
      "
    >
      {/* Decorative Background */}
      <div className="absolute inset-0 pointer-events-none">

        <div
          className="
            absolute
            inset-0
            opacity-[0.03]
            bg-[radial-gradient(circle,#b68b38_1px,transparent_1px)]
            [background-size:32px_32px]
          "
        />

        <div
          className="
            absolute
            -left-40
            top-20
            h-96
            w-96
            rounded-full
            bg-[#d9b15d]/10
            blur-[120px]
          "
        />

        <div
          className="
            absolute
            -right-40
            bottom-0
            h-[30rem]
            w-[30rem]
            rounded-full
            bg-[#d9b15d]/10
            blur-[120px]
          "
        />

      </div>

      <div className="relative mx-auto max-w-7xl px-6">

        {/* Heading */}

        <div className="mb-20 text-center">

          <span
            className="
              uppercase
              tracking-[0.45em]
              text-[#c49a3a]
              text-xs
              font-semibold
            "
          >
            PREMIUM HOSPITALITY
          </span>

          <h2
            className="
              mt-5
              font-serif
              text-4xl
              md:text-6xl
              font-light
              leading-tight
              text-[#2d2418]
            "
          >
            Everything You Need for a
            <br />
            Seamless Experience
          </h2>

          <div className="mt-8 flex justify-center items-center gap-3">
            <div className="h-px w-24 bg-[#d9b15d]" />
            <div className="h-2 w-2 rounded-full bg-[#d9b15d]" />
            <div className="h-px w-24 bg-[#d9b15d]" />
          </div>

        </div>

        <div
          className="
            grid
            gap-8
            md:grid-cols-2
            lg:grid-cols-3
            2xl:grid-cols-4
          "
        >
          {services.map((service, index) => {

            const Icon = service.icon;

                        return (
              <div
                key={service.title}
                style={{
                  animationDelay: `${index * 80}ms`,
                }}
                className="
                  group
                  relative
                  overflow-hidden
                  rounded-[30px]
                  border
                  border-[#e6d5b3]
                  bg-gradient-to-b
                  from-white
                  via-[#fdfbf7]
                  to-[#f8f2e6]
                  p-8
                  will-change-transform
                  transition-all
                  duration-700
                  hover:-translate-y-3
                  hover:border-[#d9b15d]
                  hover:from-[#fffefc]
                  hover:via-[#fff7e6]
                  hover:to-[#f8ecd2]
                  hover:shadow-[0_40px_90px_rgba(0,0,0,0.18)]
                "
              >
                {/* Top Gold Line */}
                <div
                  className="
                    absolute
                    top-0
                    left-0
                    h-1
                    w-full
                    bg-gradient-to-r
                    from-transparent
                    via-[#d9b15d]
                    to-transparent
                    opacity-0
                    group-hover:opacity-100
                    will-change-transform
                    transition-all
                    duration-500
                  "
                />

                {/* Shine Effect */}
                <div
                  className="
                    absolute
                    inset-0
                    opacity-0
                    group-hover:opacity-100
                    will-change-transform
                    transition-all
                    duration-700
                    bg-[linear-gradient(120deg,transparent,rgba(255,255,255,0.28),transparent)]
                    -translate-x-full
                    group-hover:translate-x-full
                  "
                />

                {/* Gold Glow */}
                <div
                  className="
                    absolute
                    -right-10
                    -top-10
                    h-40
                    w-40
                    rounded-full
                    bg-[#d7b86a]/10
                    blur-3xl
                    will-change-transform
                    transition-all
                    duration-700
                    group-hover:scale-150
                  "
                />

                {/* Decorative Corner */}
                <div
                  className="
                    absolute
                    left-5
                    top-5
                    h-6
                    w-6
                    border-l
                    border-t
                    border-[#d9b15d]
                    opacity-30
                    transition
                    duration-300
                    group-hover:opacity-100
                  "
                />

                <div
                  className="
                    absolute
                    right-5
                    bottom-5
                    h-6
                    w-6
                    border-r
                    border-b
                    border-[#d9b15d]
                    opacity-30
                    transition
                    duration-300
                    group-hover:opacity-100
                  "
                />

                {/* Icon */}
                <div
                  className="
                    relative
                    mx-auto
                    flex
                    h-20
                    w-20
                    items-center
                    justify-center
                    rounded-full
                    border-2
                    border-[#d6b46a]
                    bg-gradient-to-br
                    from-[#fffef9]
                    via-[#f5e5bb]
                    to-[#ddb76d]
                    shadow-lg
                    will-change-transform
                    transition-all
                    duration-500
                    group-hover:scale-110
                    group-hover:shadow-[0_10px_30px_rgba(212,175,55,.45)]
                  "
                >
                  <Icon
                    size={34}
                    className="
                      text-[#6d4b16]
                      will-change-transform
                      transition-all
                      duration-500
                      group-hover:scale-110
                      group-hover:-translate-y-1
                    "
                  />
                </div>

                <div
                  className="
                    mx-auto
                    mt-6
                    h-px
                    w-16
                    bg-gradient-to-r
                    from-transparent
                    via-[#c49a3a]
                    to-transparent
                  "
                />

                <h3
                  className="
                    mt-6
                    text-center
                    font-serif
                    text-[22px]
                    leading-snug
                    text-[#2d2418]
                    transition-colors
                    duration-300
                    group-hover:text-[#8a6525]
                  "
                >
                  {service.title}
                </h3>

                <p
                  className="
                    mt-5
                    text-center
                    text-[15px]
                    leading-7
                    text-[#6b5d48]
                  "
                >
                  {service.description}
                </p>

                <div className="mt-6 flex justify-center">
                  <div className="h-px w-20 bg-gradient-to-r from-transparent via-[#c49a3a] to-transparent" />
                </div>
              </div>
            );
                      })}
        </div>
      </div>
    </section>
  );
}