"use client"

import { teamMembers, socialLinks } from "@/data";
import { motion } from "framer-motion";
import { Facebook, Youtube, Users, Heart, Target } from "lucide-react";
import Link from "next/link";

export default function AboutClient() {
  const allMembers = [
    teamMembers.founder,
    ...teamMembers.admins,
    ...teamMembers.moderators,
  ];

  return (
    <div className="pt-20">
      {/* Hero Section */}
      <section className="py-16 bg-primary/5">
        <div className="container px-4 text-center">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
          >
            <h1 className="text-4xl md:text-5xl font-bold mb-4">
              About <span className="text-primary">Trains of Rajbari</span>
            </h1>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
              Connecting the people of Rajbari through the tracks since 2023.
              A community-driven platform for railway enthusiasts.
            </p>
          </motion.div>
        </div>
      </section>

      {/* Mission Section */}
      <section className="py-16">
        <div className="container px-4">
          <div className="grid md:grid-cols-3 gap-8 max-w-4xl mx-auto">
            {[
              {
                icon: Target,
                title: "Our Mission",
                desc: "To provide the most comprehensive and up-to-date railway information for Rajbari district.",
              },
              {
                icon: Users,
                title: "Our Community",
                desc: "A growing network of railway enthusiasts, commuters, and locals sharing their experiences.",
              },
              {
                icon: Heart,
                title: "Our Passion",
                desc: "Built with love for the railways and the people of Rajbari who depend on them daily.",
              },
            ].map((item, index) => (
              <motion.div
                key={item.title}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ delay: index * 0.1 }}
                viewport={{ once: true }}
                className="text-center p-6 rounded-xl border bg-card"
              >
                <item.icon className="h-10 w-10 text-primary mx-auto mb-4" />
                <h3 className="text-lg font-bold mb-2">{item.title}</h3>
                <p className="text-sm text-muted-foreground">{item.desc}</p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Team Section */}
      <section className="py-16 bg-muted/30">
        <div className="container px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold mb-2">Meet the Team</h2>
            <p className="text-muted-foreground">
              The people who keep the community running
            </p>
          </div>

          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 max-w-5xl mx-auto">
            {allMembers.map((member, index) => (
              <motion.div
                key={member.name}
                initial={{ opacity: 0, scale: 0.9 }}
                whileInView={{ opacity: 1, scale: 1 }}
                transition={{ delay: index * 0.05 }}
                viewport={{ once: true }}
                className={`text-center p-4 rounded-xl border bg-card ${
                  member.type === "founder"
                    ? "col-span-2 md:col-span-1 border-primary/50 shadow-lg"
                    : ""
                }`}
              >
                <div className="relative w-20 h-20 mx-auto mb-3">
                  <img
                    src={member.image}
                    alt={member.name}
                    className="w-full h-full rounded-full object-cover border-2 border-primary/20"
                  />
                  {member.type === "founder" && (
                    <span className="absolute -top-1 -right-1 bg-primary text-primary-foreground text-[10px] px-1.5 py-0.5 rounded-full font-bold">
                      Founder
                    </span>
                  )}
                </div>
                <h3 className="font-bold text-sm">{member.name}</h3>
                <p className="text-xs text-muted-foreground">{member.role}</p>
                <p className="text-xs text-muted-foreground mt-1 line-clamp-2">
                  {member.bio}
                </p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Connect Section */}
      <section className="py-16">
        <div className="container px-4 text-center">
          <h2 className="text-3xl font-bold mb-4">Connect With Us</h2>
          <p className="text-muted-foreground mb-8 max-w-xl mx-auto">
            Join our community on social media and stay updated with the latest
            railway news.
          </p>
          <div className="flex justify-center gap-4">
            <a
              href={socialLinks.facebookPage}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-2 px-6 py-3 rounded-full bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
            >
              <Facebook size={20} />
              <span>Facebook Page</span>
            </a>
            <a
              href={socialLinks.youtube}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-2 px-6 py-3 rounded-full bg-red-600 text-white hover:bg-red-700 transition-colors"
            >
              <Youtube size={20} />
              <span>YouTube</span>
            </a>
          </div>
        </div>
      </section>
    </div>
  );
}
