import { GraduationCap, ShieldCheck, TrendingUp, Users } from "lucide-react";
import { Reveal } from "./Reveal";

const items = [
  { icon: GraduationCap, title: "Beginner to Advanced", text: "Step-by-step paths tailored to your level." },
  { icon: TrendingUp, title: "Real Market Analysis", text: "Daily live market breakdowns and trade setups." },
  { icon: ShieldCheck, title: "Risk Management", text: "Protect your capital with disciplined frameworks." },
  { icon: Users, title: "Live Community", text: "Learn alongside thousands of active traders." },
];

export function About() {
  return (
    <section id="about" 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">
            About Fighter Bull's
          </div>
          <h2 className="mt-4 text-4xl font-bold md:text-5xl">
            A modern <span className="text-gradient-primary">trading mentorship</span> platform
          </h2>
          <p className="mt-5 text-muted-foreground md:text-lg leading-relaxed">
            We help beginners and advanced traders learn Crypto, Forex, Indian Market Options
            and professional risk management — with practical, in-your-language live sessions.
          </p>
        </div>
      </Reveal>
      <div className="mt-16 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
        {items.map(({ icon: Icon, title, text }, i) => (
          <Reveal key={title} delay={i * 100}>
            <div className="group relative h-full overflow-hidden rounded-3xl border border-border bg-surface-elevated p-6 shadow-card transition-all hover:-translate-y-2 hover:shadow-glow hover:border-primary/40">
              <div className="absolute inset-0 bg-gradient-primary opacity-0 transition-opacity group-hover:opacity-[0.04]" />
              <div className="relative">
                <div className="inline-flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-primary text-primary-foreground shadow-glow">
                  <Icon className="h-7 w-7" />
                </div>
                <h3 className="mt-5 text-lg font-bold">{title}</h3>
                <p className="mt-2 text-sm text-muted-foreground leading-relaxed">{text}</p>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}