import React from "react";
import { Navigation } from "../components/Navigation";
import { Footer } from "../components/Footer";
import { Button } from "../components/ui/button";
import { Badge } from "../components/ui/badge";
import { ArrowRight, Linkedin, Twitter, Mail } from "lucide-react";
import { useNavigate } from "react-router-dom";
import riteshImage from "../src/images/ritesh-pandey.png";
import manavImage from "../src/images/manav-sain.png";
import sudhirImage from "../src/images/sudhir-malya.jpg";
import kartikeyImage from "../src/images/kartikeya-gautam.png";
import poojaImage from "../src/images/pooja-patade.jpg";
import tanveerImage from "../src/images/tanveer.jpg";
import { Helmet } from "react-helmet-async";

export const LeadershipTeam = () => {
  const navigate = useNavigate();
  const leaders = [
    {
      name: "Ritesh Pandey",
      position: "Founder & CEO",
      image: riteshImage,
      accent: "pink", // default
      bio: "Founder & CEO leading innovation and AI-driven growth across industries.",
      social: {
        linkedin: "https://linkedin.com/in/riteshwdipl",
        email: "#",
        twitter: "#",
      },
    },
    {
      name: "Manav Sain",
      position: "VP- Business Solutions",
      image: manavImage,
      accent: "green",
      bio: "VP crafting business solutions and scaling digital strategy for enterprise clients.",
      social: {
        linkedin: "https://linkedin.com/in/manavsain",
        email: "#",
        twitter: "#",
      },
    },
    {
      name: "Sudhir Mallya",
      position: "CTO",
      image: sudhirImage,
      accent: "blue",
      bio: "CTO leading technology innovation and scalable digital architecture.",
      experience: "Former VP at Microsoft, Stanford MBA",
      social: {
        linkedin: "#",
        email: "#",
        twitter: "#",
      },
    },
    {
      name: "Kartikey Gautam",
      position: "Product Manager",
      image: kartikeyImage,
      accent: "green",
      bio: "Product Manager building scalable AI products with a user-centric approach.",
      experience: "Former VP at Microsoft, Stanford MBA",
      social: {
        linkedin: "https://linkedin.com/in/kartikey-gautam-product-manager",
        email: "#",
        twitter: "#",
      },
    },
    {
      name: "Pooja Patade",
      position: "Head - Accounts & HR",
      image: poojaImage,
      accent: "blue",
      bio: "Head of HR & Accounts ensuring smooth operations and organizational alignment.",
      experience: "Former VP at Microsoft, Stanford MBA",
      social: {
        linkedin: "https://linkedin.com/in/pooja-patade-85453a13b",
        email: "#",
        twitter: "#",
      },
    },
    {
      name: "Tanveer Ajani",
      position: "Compliance Head",
      image: tanveerImage,
      accent: "pink",
      bio: "Ensures regulatory excellence and drives compliance across operations.",
      experience: "Former VP at Microsoft, Stanford MBA",
      social: {
        linkedin: "#",
        email: "#",
        twitter: "#",
      },
    },
  ];


  // Helper function to get accent colors
  const getAccentColors = (accent: string) => {
    switch (accent) {
      case 'green':
        return {
          primary: '#10B981',
          bg: 'from-green-600/20 to-emerald-500/20',
          border: 'border-green-500/30',
          hover: 'hover:bg-green-500/20',
          shadow: 'hover:shadow-green-500/25',
          text: 'text-green-400'
        };
      case 'blue':
        return {
          primary: '#3B82F6',
          bg: 'from-blue-600/20 to-blue-500/20',
          border: 'border-blue-500/30',
          hover: 'hover:bg-blue-500/20',
          shadow: 'hover:shadow-blue-500/25',
          text: 'text-blue-400'
        };
      default: // pink
        return {
          primary: '#E5195E',
          bg: 'from-[#E5195E]/20 to-[#FF6B9D]/20',
          border: 'border-[#E5195E]/30',
          hover: 'hover:bg-[#E5195E]/20',
          shadow: 'hover:shadow-[#E5195E]/25',
          text: 'text-[#E5195E]'
        };
    }
  };

  return (
    <div className="dark min-h-screen bg-background">
      <Helmet>
        {/* Page Title and Meta Description */}
        <title>Leadership Team | Experts in Tech Leadership & Innovation</title>
        <meta
          name="description"
          content="Meet WDI’s leadership team, visionaries with a proven track record in tech innovation, digital transformation, and delivering client success globally."
        />

        {/* Canonical Link */}
        <link rel="canonical" href="https://www.wdipl.com/company/leadership-team" />

        {/* Open Graph Tags (for Facebook, LinkedIn) */}
        <meta property="og:title" content="Leadership Team | Experts in Tech Leadership & Innovation" />
        <meta
          property="og:description"
          content="Meet WDI’s leadership team, visionaries with a proven track record in tech innovation, digital transformation, and delivering client success globally."
        />
        <meta property="og:url" content="https://www.wdipl.com/services" />
        <meta property="og:type" content="website" />
        <meta property="og:image" content="https://www.wdipl.com/your-preview-image.jpg" />

        {/* Twitter Card Tags */}
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content="Leadership Team | Experts in Tech Leadership & Innovation" />
        <meta
          name="twitter:description"
          content="Meet WDI’s leadership team, visionaries with a proven track record in tech innovation, digital transformation, and delivering client success globally."
        />
        <meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />

        {/* Social Profiles (using JSON-LD Schema) */}
        <script type="application/ld+json">
          {`
            {
              "@context": "https://schema.org",
              "@type": "Organization",
              "name": "WDI",
              "url": "https://www.wdipl.com",
              "sameAs": [
                "https://www.facebook.com/wdideas",
                "https://www.linkedin.com/in/website-developers-india/",
                "https://www.instagram.com/wdipl/"
              ]
            }
          `}
        </script>
      </Helmet>
      {/* <Navigation /> */}

      {/* Hero Section */}
      <section className="relative pt-24 pb-16 overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-br from-[#E5195E]/10 via-background to-background" />
        <div
          className="absolute inset-0 opacity-30"
          style={{
            backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0)`,
            backgroundSize: "40px 40px",
          }}
        />

        <div className="relative container mx-auto px-6 lg:px-8">
          <div className="max-w-4xl mx-auto text-center">
            <Badge
              variant="outline"
              className="mb-6 border-[#E5195E]/20 text-[#E5195E]"
            >
              Leadership Team
            </Badge>
            <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 bg-gradient-to-r from-white via-white to-white/80 bg-clip-text text-transparent">
              Meet the Visionaries Behind
              <span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent">
                {" "}
                WDI
              </span>
            </h1>
            <p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto leading-relaxed">
              Our leadership team combines decades of experience from top tech
              companies with a shared passion for digital innovation and client
              success.
            </p>
          </div>
        </div>
      </section>

      {/* Leadership Grid */}
      <section className="py-16 bg-background">
        <div className="container mx-auto px-6 lg:px-8">
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {leaders.map((leader, index) => {
              const colors = getAccentColors(leader.accent);

              return (
                <div
                  key={index}
                  className="group transition-all duration-500 ease-in-out"
                >
                  <div className={`bg-card/50 rounded-2xl p-6 border border-white/10 hover:border-white/20 backdrop-blur-md transition-all duration-500 ease-in-out hover:bg-card/70`}>
                    {/* Profile Image - Reduced Size */}
                    <div className="relative mb-6 flex justify-center transition-all duration-500 ease-in-out">
                      <div
                        className={`relative w-24 h-24 rounded-2xl overflow-hidden bg-gradient-to-br ${colors.bg} transition-all duration-500 ease-in-out`}
                      >
                        <img
                          src={leader.image}
                          alt={leader.name}
                          className="w-full h-full object-cover group-hover:opacity-90 transition-opacity duration-500 ease-in-out"
                        />

                        {/* Colored Glow Effect on Hover */}
                        <div
                          className={`absolute inset-0 rounded-2xl bg-gradient-to-t from-[${colors.primary}]20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 ease-in-out`}
                        />
                      </div>

                      {/* Colored Status Ring */}
                      <div
                        className={`absolute -bottom-1 -right-1 w-6 h-6 rounded-full border-2 border-card flex items-center justify-center`}
                        style={{ backgroundColor: colors.primary }}
                      >
                        <div className="w-2 h-2 bg-white rounded-full" />
                      </div>
                    </div>

                    {/* Content */}
                    <div className="space-y-4 text-center transition-all duration-500 ease-in-out">
                      <div>
                        <h3 className="text-xl font-bold text-white mb-1 font-manrope">
                          {leader.name}
                        </h3>
                        <p className={`${colors.text} font-medium mb-3 font-manrope`}>
                          {leader.position}
                        </p>
                      </div>

                      <p className="text-muted-foreground text-sm leading-relaxed font-manrope">
                        {leader.bio}
                      </p>

                      <div className="pt-3 border-t border-white/10">
                        {/* Social Links */}
                        <div className="flex justify-center">
                          <a
                            href={leader.social.linkedin}
                            target="_blank"
                            rel="noopener noreferrer"
                            className={`w-9 h-9 rounded-lg bg-white/10 ${colors.hover} flex items-center justify-center transition-all duration-500 ease-in-out hover:shadow-lg ${colors.shadow} group/social`}
                            style={{
                              background: `linear-gradient(135deg, ${colors.primary}20, ${colors.primary}10)`,
                            }}
                          >
                            <Linkedin className="w-4 h-4 text-white transition-all duration-300 ease-in-out" />
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

              );
            })}
          </div>
        </div>
      </section>

      {/* Advisory Board */}
      {/* <section className="py-16 bg-card/50">
        <div className="container mx-auto px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold mb-4 text-white">
              Advisory Board
            </h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              Industry experts who guide our strategic direction and innovation
              initiatives
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            {[
              {
                name: "Dr. Alan Foster",
                title: "Former CTO, Meta",
                expertise: "AI & Emerging Technologies",
              },
              {
                name: "Maria Santos",
                title: "Former VP, Netflix",
                expertise: "Product Strategy & Growth",
              },
              {
                name: "Robert Kim",
                title: "Former Director, Amazon",
                expertise: "Cloud Infrastructure & Scalability",
              },
            ].map((advisor, index) => (
              <div
                key={index}
                className="text-center p-6 rounded-2xl bg-background/50 border border-white/10"
              >
                <div className="w-16 h-16 rounded-full bg-gradient-to-br from-[#E5195E]/20 to-[#FF6B9D]/20 mx-auto mb-4 flex items-center justify-center">
                  <span className="text-2xl font-bold text-[#E5195E]">
                    {advisor.name
                      .split(" ")
                      .map((n) => n[0])
                      .join("")}
                  </span>
                </div>
                <h3 className="text-lg font-semibold text-white mb-1">
                  {advisor.name}
                </h3>
                <p className="text-sm text-[#E5195E] mb-2">{advisor.title}</p>
                <p className="text-xs text-muted-foreground">
                  {advisor.expertise}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section> */}

      {/* CTA Section */}
      <section className="py-16 bg-background">
        <div className="container mx-auto px-6 lg:px-8">
          <div className="max-w-4xl mx-auto text-center">
            <h2 className="text-3xl md:text-4xl font-bold mb-6 text-white">
              Want to Work with Our Team?
            </h2>
            <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
              Join our growing team of innovators or partner with us to
              transform your business
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button
                size="lg"
                className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
              >
                Explore Careers
                <ArrowRight className="ml-2 w-4 h-4" />
              </Button>
              <Button
                size="lg"
                variant="outline"
                className="border-white/20 text-white hover:bg-white/10"
                onClick={() => navigate("/start-a-project")}
              >
                Start a Project
              </Button>
            </div>
          </div>
        </div>
      </section>

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