import { Activity, BookOpen, Globe2, Headphones, MessageSquare, Smartphone, Sparkles, Users } from "lucide-react";
import { Reveal } from "./Reveal";

const features = [
  { icon: Activity, label: "Live Market Training", desc: "Real-time sessions" },
  { icon: BookOpen, label: "Beginner Friendly", desc: "Start from zero" },
  { icon: Globe2, label: "Your Own Language", desc: "Bengali · Hindi · English" },
  { icon: Sparkles, label: "Daily Mentorship", desc: "Never trade alone" },
  { icon: Users, label: "Community Support", desc: "5000+ traders" },
  { icon: MessageSquare, label: "Real-Time Analysis", desc: "Daily setups" },
  { icon: Headphones, label: "Practical Learning", desc: "Live examples" },
  { icon: Smartphone, label: "Mobile Friendly", desc: "Learn anywhere" },
];

export function Features() {
  return (
    <section id="features" className="relative overflow-hidden">
      <div className="absolute inset-0 bg-gradient-mesh opacity-40" />
      <div className="relative mx-auto max-w-7xl px-4 py-24 md:px-8">
        <Reveal>
          <div className="mx-auto max-w-3xl text-center">
            <div className="inline-flex items-center gap-2 rounded-full border border-primary/30 bg-primary/10 px-3 py-1 text-xs font-semibold text-primary">
              Why Fighter Bull's
            </div>
            <h2 className="mt-4 text-4xl font-bold md:text-5xl">
              Everything you need to <span className="text-gradient-primary">trade smarter</span>
            </h2>
          </div>
        </Reveal>
        <div className="mt-16 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {features.map(({ icon: Icon, label, desc }, i) => (
            <Reveal key={label} delay={i * 60}>
              <div className="group relative flex h-full items-center gap-4 overflow-hidden rounded-2xl border border-border bg-surface-elevated p-5 shadow-card transition-all hover:-translate-y-1 hover:border-primary/40 hover:shadow-glow">
                <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-gradient-primary text-primary-foreground shadow-glow transition-transform group-hover:scale-110 group-hover:rotate-6">
                  <Icon className="h-5 w-5" />
                </div>
                <div>
                  <div className="text-sm font-bold">{label}</div>
                  <div className="text-xs text-muted-foreground">{desc}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}
