"use client";

import { Eye, BarChart3, FileSearch, Sparkles } from "lucide-react";

const benefits = [
  {
    title: "Track brand visibility across AI and search",
    desc: "Monitor your presence across AI Mode, AI Overviews, and traditional organic results to understand where your brand stands.",
    icon: Eye,
    bg: "bg-blue-100",
    color: "text-blue-600",
  },
  {
    title: "Compare visibility across search modes",
    desc: "Compare how your brand performs in AI Mode, AI Overviews, and organic search to uncover gaps and opportunities.",
    icon: BarChart3,
    bg: "bg-green-100",
    color: "text-green-600",
  },
  {
    title: "Measure key AI SEO metrics",
    desc: "Analyze search volume, estimated traffic, and the type of mentions your business receives in AI-generated responses.",
    icon: Sparkles,
    bg: "bg-orange-100",
    color: "text-orange-600",
  },
  {
    title: "View exact AI Mode snippets",
    desc: "See the full AI Mode responses where your brand appears and dive into specific snippets that include your link or mention.",
    icon: FileSearch,
    bg: "bg-[#EEF2FF]",
    color: "text-[#794AFF]",
  },
];

const AiModeBenefits = () => {
  return (
    <section className="py-10 lg:py-20 px-6">
      <h2 className="mx-auto text-center text-3xl lg:text-4xl font-semibold text-[#212121] max-w-3xl">
        Get a complete view of your AI presence with even more AI Mode insights
      </h2>

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

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