1import React from 'react';
2import { Users, Search, Lightbulb, Megaphone } from 'lucide-react';
3
4export const InsightsSection = () => {
5  const cards = [
6    {
7      icon: <Users className="w-6 h-6" />,
8      iconBg: 'bg-sky-500',
9      title: 'Your Users Are Your North Star',
10      description: "They'll tell you what's working, what's not, and what they hope you'll create next. Every piece of feedback is a map to your product's best version.",
11    },
12    {
13      icon: <Search className="w-6 h-6" />,
14      iconBg: 'bg-red-500',
15      title: 'Mistakes Are Part of the Journey',
16      description: "Bugs happen, but what matters is how quickly you fix them. Your users will stick with you if they feel heard and valued.",
17    },
18    {
19      icon: <Lightbulb className="w-6 h-6" />,
20      iconBg: 'bg-orange-500',
21      title: "Big Ideas Don't Come from the Boardroom",
22      description: "Some of your most game-changing features will come straight from your users. Give them a voice, and they'll guide your roadmap.",
23    },
24    {
25      icon: <Megaphone className="w-6 h-6" />,
26      iconBg: 'bg-white',
27      title: 'Success Feels Better When You Share It',
28      description: "When you nail the experience — when your users are happy — that's when your ratings soar, and your brand thrives.",
29    },
30  ];
31
32  return (
33    <div className="min-h-screen bg-[#292929] py-20 px-6">
34      <div className="max-w-7xl mx-auto">
35        <div className="text-center mb-16">
36          <p className="text-gray-400 text-xl mb-4 font-['Brush_Script_MT',cursive] italic">
37            Hear it out
38          </p>
39          <h1 className="text-5xl md:text-6xl font-bold text-white mb-6">
40            Why Collect Insights?
41          </h1>
42          <p className="text-gray-300 text-xl md:text-2xl">
43            Because understanding your users isn&apos;t optional — it&apos;s everything.
44          </p>
45        </div>
46
47        <div className="grid md:grid-cols-2 gap-3 max-w-6xl mx-auto">
48          {cards.map((card, index) => (
49            <div
50              key={index}
51              className="bg-[#3D3D3D] rounded-4xl p-8"
52            >
53              <div
54                className={`${card.iconBg} ${card.iconBg === 'bg-white' ? 'text-gray-900' : 'text-white'
55                  } w-16 h-16 rounded-full flex items-center justify-center mb-6`}
56              >
57                {card.icon}
58              </div>
59              <h3 className="text-white text-2xl font-bold mb-4">
60                {card.title}
61              </h3>
62              <p className="text-gray-200 text-lg leading-relaxed">
63                {card.description}
64              </p>
65            </div>
66          ))}
67        </div>
68      </div>
69    </div>
70  );
71};
72
73export default InsightsSection;
74