import {
  Monitor,
  MousePointerClick,
  ChartPie,
  FlaskConical,
} from "lucide-react";
const features = [
  {
    name: "Real-Time Analytics",
    description: "Monitor user activity and track key metrics in real time.",
    icon: Monitor,
  },
  {
    name: "Event Tracking",
    description:
      "Easily track user interactions such as clicks, form submissions, and video plays.",
    icon: MousePointerClick,
  },
  {
    name: "A/B Testing",
    description:
      "Run experiments to compare different versions of your pages or features.",
    icon: FlaskConical,
  },
  {
    name: "Funnel Analysis",
    description:
      "Identify drop-offs in your conversion funnel and optimize the user journey.",
    icon: ChartPie,
  },
];

export function Features() {
  return (
    <div className="py-28">
      <div className="max-w-screen-2xl mx-auto px-8">
        <div className="max-w-xl mx-auto lg:text-center">
          <p className="text-2xl font-bold md:text-3xl">
            Features you need to understand your website traffic
          </p>
          <p className="text-foreground/60 mt-6 md:text-lg">
            From real-time insights to in-depth user tracking, get the tools to
            make smarter, data-driven decisions.
          </p>
        </div>

        <div className="max-w-2xl mx-auto mt-16 md:mt-20 lg:mt-24 lg:max-w-4xl">
          <div className="grid grid-cols-1 gap-x-8 gap-y-10 lg:grid-cols-2 lg:gap-y-16">
            {features.map((feature) => (
              <div key={feature.name} className="relative pl-16">
                <div className="font-semibold">
                  <div className="absolute left-0 top-0 flex w-9 h-9 items-center justify-center rounded-lg border-[1.5px] border-foreground">
                    <feature.icon
                      aria-hidden="true"
                      className="h-5 w-5 stroke-[1.5px]"
                    />
                  </div>
                  {feature.name}
                </div>
                <div className="text-foreground/60 mt-2">
                  {feature.description}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}