import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import {
  Linkedin, Twitter, Github, Lightbulb, Users, Trophy, MapPin
} from "lucide-react";
import Header from "@/components/Header";
import Footer from "@/components/Footer";

const teamMembers = [
  {
    name: "",
    role: "",
    bio: "With over 12 years in design, Alex leads our creative vision and ensures every project tells a compelling visual story.",
    gradient: "from-violet-400 to-indigo-500",
  },
  {
    name: "",
    role: "",
    bio: "Jordan architects scalable systems and mentors our engineering team. A full-stack expert passionate about clean code.",
    gradient: "from-rose-400 to-orange-500",
  },
  {
    name: "",
    role: "",
    bio: "Priya combines research with intuition to craft experiences users love. She has led UX for 50+ digital products.",
    gradient: "from-emerald-400 to-teal-500",
  },
  {
    name: "",
    role: "",
    bio: "David drives growth through data-driven strategies. He has managed campaigns generating over $10M in revenue.",
    gradient: "from-amber-400 to-pink-500",
  },
  {
    name: "Lisa Nguyen",
    role: "Project Manager",
    bio: "Lisa ensures every project runs on time and on budget. She brings structure and clarity to complex engagements.",
    gradient: "from-cyan-400 to-blue-500",
  },
  {
    name: "Marcus Johnson",
    role: "Content Strategist",
    bio: "Marcus crafts brand narratives that resonate. He has written for top publications and led content for major launches.",
    gradient: "from-fuchsia-400 to-purple-500",
  },
];

const values = [
  { icon: Lightbulb, title: "Innovation First", desc: "We push boundaries and embrace emerging technologies to deliver forward-thinking solutions." },
  { icon: Users, title: "Collaboration", desc: "Great work happens when diverse minds come together. We partner closely with every client." },
  { icon: Trophy, title: "Excellence", desc: "We hold ourselves to the highest standards in design, code quality, and client communication." },
];

const openPositions = [
  { title: "Senior React Developer", department: "Engineering", location: "San Francisco, CA", type: "Full-time" },
  { title: "UX Researcher", department: "Design", location: "Remote", type: "Remote" },
  { title: "Growth Marketing Manager", department: "Marketing", location: "New York, NY", type: "Full-time" },
];

export default function TeamPage() {
  return (
    <div className="min-h-screen bg-background text-foreground antialiased">
      <Header />

      {/* ── HERO ── */}
      <section className="pt-32 pb-20">
        <div className="mx-auto max-w-7xl px-6 text-center">
          <h1 className="text-4xl sm:text-5xl font-extrabold tracking-tight animate-fade-up">
            The People Behind the Work
          </h1>
          <p className="mt-6 text-lg text-muted-foreground max-w-2xl mx-auto">
            A diverse team of designers, developers, strategists, and marketers united by a love for craft.
          </p>
        </div>
      </section>

      {/* ── TEAM MEMBERS ── */}
      <section className="pb-24">
        <div className="mx-auto max-w-7xl px-6">
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-10 stagger">
            {teamMembers.map((m, i) => (
              <div key={i} className="text-center group">
                <div className={`mx-auto w-32 h-32 rounded-full bg-gradient-to-br ${m.gradient} mb-6 hover:scale-110 hover:ring-4 hover:ring-primary/20 transition-all shadow-lg`} />
                <h3 className="text-xl font-bold">{m.name}</h3>
                <p className="text-sm text-primary font-medium mb-3">{m.role}</p>
                <p className="text-sm text-muted-foreground leading-relaxed mb-4">{m.bio}</p>
                <div className="flex items-center justify-center gap-2">
                  <Button variant="ghost" size="icon" className="h-8 w-8"><Linkedin className="h-4 w-4" /></Button>
                  <Button variant="ghost" size="icon" className="h-8 w-8"><Twitter className="h-4 w-4" /></Button>
                  <Button variant="ghost" size="icon" className="h-8 w-8"><Github className="h-4 w-4" /></Button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── CULTURE / VALUES ── */}
      <section className="py-24 bg-muted/30">
        <div className="mx-auto max-w-7xl px-6">
          <div className="text-center mb-16">
            <h2 className="text-3xl sm:text-4xl font-bold tracking-tight animate-fade-up">Our Values</h2>
            <p className="mt-4 text-muted-foreground max-w-xl mx-auto">The principles that guide everything we do.</p>
          </div>
          <div className="grid md:grid-cols-3 gap-8 stagger">
            {values.map((v, i) => (
              <Card key={i} className="text-center border hover:border-primary transition-colors">
                <CardHeader>
                  <div className="mx-auto w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center mb-3">
                    <v.icon className="h-7 w-7 text-primary" />
                  </div>
                  <CardTitle className="text-lg">{v.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-muted-foreground leading-relaxed">{v.desc}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* ── CAREERS ── */}
      <section className="py-24">
        <div className="mx-auto max-w-4xl px-6">
          <div className="text-center mb-16">
            <h2 className="text-3xl sm:text-4xl font-bold tracking-tight animate-fade-up">Join Our Team</h2>
            <p className="mt-4 text-muted-foreground max-w-xl mx-auto">We are always looking for talented people who share our passion for great work.</p>
          </div>
          <div className="space-y-4">
            {openPositions.map((job, i) => (
              <Card key={i} className="border hover:border-primary transition-colors">
                <CardContent className="p-6 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
                  <div className="space-y-2">
                    <h3 className="font-bold text-lg">{job.title}</h3>
                    <div className="flex flex-wrap items-center gap-2">
                      <Badge variant="secondary">{job.department}</Badge>
                      <span className="flex items-center gap-1 text-sm text-muted-foreground">
                        <MapPin className="h-3.5 w-3.5" /> {job.location}
                      </span>
                      <Badge variant="outline">{job.type}</Badge>
                    </div>
                  </div>
                  <Button asChild className="active:scale-[0.98]">
                    <Link to="/contact">Apply</Link>
                  </Button>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
}