import { Link } from 'react-router-dom';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';

const TEAM_BG = 'https://mgx-backend-cdn.metadl.com/generate/images/1093861/2026-04-06/510f12af-0b07-4d6a-a050-b62186fdb0bf.png';

const teamMembers = [
  {
    name: 'Sanjeev Rao',
    role: 'Founder & CEO',
    bio: 'Previously co-founded Leap Wallet. Visionary leader with deep roots in blockchain infrastructure. Passionate about making cross-chain crypto accessible to everyone.',
    photo: '/assets/team/member-1-new.png',
    color: 'from-[#627EEA]/20 to-primary/20',
  },
  {
    name: 'Jane Hollow',
    role: 'CTO',
    bio: 'Former CTO at Leap Wallet. Systems architect and protocol expert who turns complex multi-chain challenges into elegant, performant solutions.',
    photo: '/assets/team/member-2-new.png',
    color: 'from-[#9945FF]/20 to-primary/20',
  },
  {
    name: 'Gaurav Dhalla',
    role: 'Lead Engineer',
    bio: 'Previously Lead Engineer at Leap Wallet. Full-stack wizard who dreams in TypeScript. Built his first dApp at 16 and hasn\'t stopped shipping since.',
    photo: '/assets/team/member-3-new.png',
    color: 'from-[#10B981]/20 to-primary/20',
  },
  {
    name: 'Sofiia Kern',
    role: 'Marketing Manager',
    bio: 'Former Marketing Lead at Leap Wallet. Strategic thinker and brand builder who turns complex blockchain concepts into compelling stories.',
    photo: '/assets/team/member-4-new.png',
    color: 'from-[#06B6D4]/20 to-primary/20',
  },
];

const Team = () => {
  return (
    <div className="min-h-screen bg-background">
      <Navbar />

      {/* Hero */}
      <section className="relative pt-16 overflow-hidden">
        <div className="absolute inset-0 z-0">
          <img
            src={TEAM_BG}
            alt="Aerial beach view"
            className="w-full h-full object-cover opacity-25"
          />
          <div className="absolute inset-0 bg-gradient-to-b from-background/50 via-background/80 to-background" />
        </div>

        <div className="relative z-10 container mx-auto px-6 pt-20 pb-16 md:pt-28 md:pb-20 text-center">
          <Badge
            variant="secondary"
            className="mb-6 px-4 py-1.5 text-sm font-medium bg-accent text-accent-foreground border-0"
          >
            Meet the Crew 🏄‍♂️
          </Badge>
          <h1 className="text-4xl md:text-6xl font-bold text-foreground leading-tight mb-4">
            The <span className="text-primary">Dream Team</span>
          </h1>
          <p className="text-lg text-muted-foreground max-w-2xl mx-auto font-sans">
            From the founders of <span className="font-semibold text-foreground">Leap Wallet</span> — a dedicated crew of blockchain builders, engineers, and strategists
            united by the mission to make cross-chain crypto stupidly simple.
          </p>
        </div>
      </section>

      {/* Team Grid */}
      <section className="py-16 md:py-24 bg-background">
        <div className="container mx-auto px-6">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {teamMembers.map((member) => (
              <Card
                key={member.name}
                className="group border border-border bg-card hover:shadow-lg transition-all duration-300 overflow-hidden"
              >
                <CardContent className="p-6">
                  {/* Photo */}
                  <div
                    className={`w-20 h-20 rounded-2xl bg-gradient-to-br ${member.color} overflow-hidden mb-5 group-hover:scale-110 transition-transform duration-300`}
                  >
                    <img
                      src={member.photo}
                      alt={member.name}
                      className="w-full h-full object-cover"
                    />
                  </div>

                  {/* Info */}
                  <h3 className="text-xl font-bold text-foreground font-serif mb-1">
                    {member.name}
                  </h3>
                  <p className="text-sm font-medium text-primary mb-3 font-sans">
                    {member.role}
                  </p>
                  <p className="text-sm text-muted-foreground font-sans leading-relaxed">
                    {member.bio}
                  </p>
                </CardContent>
              </Card>
            ))}
          </div>

          {/* More team members coming soon */}
          <div className="mt-10 text-center">
            <div className="inline-flex items-center gap-2 px-6 py-3 rounded-full bg-secondary/50 border border-border">
              <span className="text-lg">👀</span>
              <span className="text-sm font-medium text-muted-foreground font-sans">
                More team members revealed soon...
              </span>
            </div>
          </div>
        </div>
      </section>

      {/* Join CTA */}
      <section className="py-16 md:py-24 bg-secondary/30">
        <div className="container mx-auto px-6 text-center">
          <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4 font-serif">
            Want to Join the Flock? 🪁
          </h2>
          <p className="text-muted-foreground max-w-lg mx-auto mb-8 font-sans">
            We're always looking for talented humans who love crypto, great
            UX, and building the future of cross-chain finance.
          </p>
          <Link to="/contact">
            <Button
              size="lg"
              className="rounded-full px-8 bg-primary text-primary-foreground hover:bg-primary/90 shadow-md"
            >
              Say Hello 👋
            </Button>
          </Link>
        </div>
      </section>

      <Footer />
    </div>
  );
};

export default Team;