"use client";

import { Link2, Globe, BarChart3, MapPin } from "lucide-react";

const tools = [
  {
    title: "Backlink data",
    desc: "Get a complete overview of your backlink profile including total backlinks, new & lost links, and dofollow/nofollow ratio.",
    icon: Link2,
    bg: "bg-blue-100",
    color: "text-blue-600",
  },
  {
    title: "Website overview",
    desc: "Analyze any website with key metrics like traffic estimates, domain authority, and number of ranking keywords.",
    icon: Globe,
    bg: "bg-green-100",
    color: "text-green-600",
  },
  {
    title: "Keyword metrics",
    desc: "Track important keywords with data like search volume, keyword difficulty, and ranking performance.",
    icon: BarChart3,
    bg: "bg-orange-100",
    color: "text-orange-600",
  },
  {
    title: "Local marketing",
    desc: "Monitor local SEO performance including Google Business profile insights, citations, and customer reviews.",
    icon: MapPin,
    bg: "bg-[#EEF2FF]",
    color: "text-[#794AFF]",
  },
];

const SeoReportGeneratorTool = () => {
  return (
    <section className="py-8 lg:py-16 px-6">
      <h2 className="mx-auto text-center text-2xl lg:text-3xl font-semibold text-[#212121] max-w-2xl">
        A standalone reporting tool that contains all the SEO data your
        customers value
      </h2>

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

          return (
            <div
              key={i}
              className={`text-center px-6 py-8 flex flex-col items-center ${
                i !== tools.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>
  );
};

export default SeoReportGeneratorTool;