"use client";

import { UserPlus, MapPin, LayoutGrid, Database } from "lucide-react";

const features = [
  {
    title: "Quick and easy to manage",
    desc: "Easily manage location data across your GBP accounts",
    icon: UserPlus,
    bg: "bg-blue-100",
    color: "text-blue-600",
  },
  {
    title: "Add any number of business locations",
    desc: "Add as many business locations as you need, update data on demand or set up a schedule",
    icon: MapPin,
    bg: "bg-green-100",
    color: "text-green-600",
  },
  {
    title: "Easy start and cross-catalogue integration",
    desc: "Reach a wider audience by adding your business to listings and catalogs",
    icon: LayoutGrid,
    bg: "bg-orange-100",
    color: "text-orange-600",
  },
  {
    title: "Accurate historical data",
    desc: "Analyze location data dynamics to make wise decisions going forward",
    icon: Database,
    bg: "bg-[#EEF2FF]",
    color: "text-[#794AFF]",
  },
];

export default function CustomSettings() {
  return (
    <section className="py-8 lg:py-16 px-6">
      <h2 className="text-center text-2xl lg:text-3xl font-semibold text-[#212121]">
        Custom Settings
      </h2>

      <div className="mt-6 lg:mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
        {features.map((item, i) => {
          const Icon = item.icon;

          return (
            <div
              key={i}
              className={`text-center px-6 py-8 flex flex-col items-center ${
                i !== features.length - 1 ? "lg:border-r border-[#E5E7EB]" : ""
              }`}
            >
              <div
                className={`w-16 h-16 flex items-center justify-center rounded-2xl ${item.bg} mb-6`}
              >
                <Icon size={28} className={item.color} />
              </div>

              <h3 className="text-lg lg:text-xl font-semibold text-[#212121]">
                {item.title}
              </h3>

              <p className="mt-3 text-sm lg:text-base text-[#676767] max-w-xs">
                {item.desc}
              </p>
            </div>
          );
        })}
      </div>
    </section>
  );
}