template-fitness/src/pages/Trainers.tsx

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Award, Calendar, Dumbbell } from "lucide-react";
import Header from "@/components/Header";
import Footer from "@/components/Footer";

const filters = ["All", "Strength", "Cardio", "Yoga", "Boxing", "Nutrition"];

const trainers = [
  { name: "Marcus Rivera", specialty: "Strength & Conditioning", certs: "NSCA-CSCS, USAW Level 2", exp: "8 years", gradient: "from-orange-400 to-red-400", tag: "Strength" },
  { name: "Sarah Chen", specialty: "HIIT & Cardio", certs: "ACE-CPT, TRX Certified", exp: "12 years", gradient: "from-red-400 to-rose-400", tag: "Cardio" },
  { name: "Priya Sharma", specialty: "Yoga & Mobility", certs: "RYT-500, FRC Certified", exp: "6 years", gradient: "from-amber-400 to-orange-400", tag: "Yoga" },
  { name: "Dante Williams", specialty: "Boxing & MMA", certs: "USA Boxing Coach, NASM-CPT", exp: "10 years", gradient: "from-rose-400 to-pink-400", tag: "Boxing" },
  { name: "Elena Vasquez", specialty: "Sports Nutrition", certs: "ISSN-CISSN, Precision Nutrition L2", exp: "9 years", gradient: "from-orange-400 to-amber-400", tag: "Nutrition" },
  { name: "Tyler Brooks", specialty: "Powerlifting", certs: "USAPL Coach, NSCA-CSCS", exp: "7 years", gradient: "from-red-400 to-orange-400", tag: "Strength" },
];

export default function Trainers() {
  const [active, setActive] = useState("All");
  const filtered = active === "All" ? trainers : trainers.filter(t => t.tag === active);

  return (
    <div className="min-h-screen bg-slate-950 text-white">
      <Header />

      {/* ── Hero ── */}
      <section className="pt-32 pb-16 bg-gradient-to-b from-slate-900 to-slate-950">
        <div className="mx-auto max-w-7xl px-6 text-center">
          <Badge className="mb-4 bg-orange-500/10 text-orange-400 border-orange-500/30 uppercase text-xs tracking-wider">The Team</Badge>
          <h1 className="text-4xl md:text-5xl font-black uppercase text-white animate-fade-up">MEET YOUR TRAINERS</h1>
          <p className="mt-4 text-slate-400 max-w-xl mx-auto">Certified professionals dedicated to helping you crush every goal.</p>
        </div>
      </section>

      {/* ── Filters ── */}
      <section className="py-16">
        <div className="mx-auto max-w-6xl px-6">
          <div className="flex gap-2 justify-center flex-wrap mb-12">
            {filters.map((f) => (
              <Button key={f} variant={active === f ? "default" : "outline"} onClick={() => setActive(f)} className={`rounded-full font-bold uppercase tracking-wide text-sm px-6 transition-all ${active === f ? "bg-gradient-to-r from-orange-500 to-red-500 text-white border-0 shadow-lg shadow-orange-500/25" : "border-slate-700 text-slate-400 hover:text-white hover:border-slate-500"}`}>
                {f}
              </Button>
            ))}
          </div>

          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8 stagger">
            {filtered.map((t, i) => (
              <Card key={i} className="bg-slate-900/80 backdrop-blur border border-slate-800 hover:border-orange-500/30 transition-all duration-300 group hover:-translate-y-1">
                <CardContent className="p-8 text-center">
                  <div className={`w-24 h-24 rounded-full bg-gradient-to-br ${t.gradient} mx-auto mb-6 flex items-center justify-center text-3xl font-black text-white shadow-xl group-hover:scale-105 transition-transform`}>
                    {t.name.split(" ").map(n => n[0]).join("")}
                  </div>
                  <h3 className="font-bold text-white text-xl">{t.name}</h3>
                  <Badge className="mt-2 bg-orange-500/10 text-orange-400 border-orange-500/30 text-xs uppercase">{t.specialty}</Badge>
                  <div className="mt-6 space-y-3 text-sm text-left">
                    <div className="flex items-center gap-3 text-slate-300">
                      <Award className="h-4 w-4 text-orange-400 shrink-0" />
                      <span>{t.certs}</span>
                    </div>
                    <div className="flex items-center gap-3 text-slate-300">
                      <Calendar className="h-4 w-4 text-orange-400 shrink-0" />
                      <span>{t.exp} experience</span>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* ── CTA ── */}
      <section className="py-16 bg-gradient-to-r from-orange-600 via-red-600 to-orange-600 relative overflow-hidden">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_50%,rgba(255,255,255,0.08),transparent)]" />
        <div className="relative mx-auto max-w-3xl px-6 text-center">
          <h2 className="text-3xl font-black uppercase text-white animate-fade-up">Want a Personalized Plan?</h2>
          <p className="mt-3 text-white/80">Book a free consultation with any of our trainers and get a custom program built for your goals.</p>
          <Button asChild size="lg" className="mt-6 bg-white text-orange-600 hover:bg-slate-100 font-bold uppercase tracking-wide rounded-full px-8 shadow-xl active:scale-[0.97] transition-all">
            <Link to="/contact">Book Free Consultation</Link>
          </Button>
        </div>
      </section>

      <Footer />
    </div>
  );
}