import { useNavigate } from "react-router-dom";
import { Button } from "./ui/button";
import { ShimmerButton } from "./ui/shimmer-button";
import { DashboardVector } from "./vectors/DashboardVector";
import { motion } from "framer-motion";

interface HireTalentHeroBannerProps {
  category?: string;
  title: string;
  description: string;
  primaryCTA: {
    text: string;
    href: string;
    icon?: React.ComponentType<{ className?: string }>;
  };
  secondaryCTA?: {
    text: string;
    href: string;
    icon?: React.ComponentType<{ className?: string }>;
  };
  useVectors?: boolean; // Keep for backward compatibility
  vectorComponent?: React.ComponentType; // New prop for custom vectors
}

export function HireTalentHeroBanner({
  category,
  title,
  description,
  primaryCTA,
  secondaryCTA,
  useVectors = false,
  vectorComponent: VectorComponent
}: HireTalentHeroBannerProps) {
  const navigate = useNavigate();
  return (
    <section className="relative py-20 overflow-hidden bg-black">
      <div className="container mx-auto px-6 lg:px-8">
        <div className="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
          <motion.div
            initial={{ opacity: 0, x: -50 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8 }}
            className="space-y-8"
          >
            {/* Category Label */}
            {category && (
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6 }}
              >
                <span className="text-white/70 text-sm font-medium font-manrope">
                  {category}
                </span>
              </motion.div>
            )}

            {/* Main Heading */}
            <div className="space-y-6">
              <h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight font-manrope">
                {title}
              </h1>
              
              <p className="text-lg text-gray-300 leading-relaxed max-w-lg font-manrope">
                {description}
              </p>
            </div>
            
            {/* CTAs */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.3 }}
              className="flex flex-col sm:flex-row gap-4"
            >
              <ShimmerButton 
                className="text-lg px-8 py-4 font-manrope"
                onClick={() => navigate(primaryCTA.href)}
              >
                <div className="inline-flex items-center gap-2">
                  {primaryCTA.icon && <primaryCTA.icon className="w-5 h-5 flex-shrink-0" />}
                  <span>{primaryCTA.text}</span>
                </div>
              </ShimmerButton>
              
              {secondaryCTA && (
                <Button
                  variant="outline"
                  size="lg"
                  className="text-lg px-8 py-4 h-auto border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white font-manrope"
                  onClick={() => navigate(secondaryCTA.href)}
                >
                  <div className="inline-flex items-center gap-2">
                    {secondaryCTA.icon && <secondaryCTA.icon className="w-5 h-5 flex-shrink-0" />}
                    <span>{secondaryCTA.text}</span>
                  </div>
                </Button>
              )}
            </motion.div>
          </motion.div>
          
          {/* Right side with Custom Vector, Dashboard Vector, or Legacy Vector Graphics */}
          <motion.div
            initial={{ opacity: 0, x: 50 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
            className="relative flex flex-col items-center"
          >
            <div className="relative w-full max-w-2xl mx-auto">
              <motion.div
                initial={{ opacity: 0, y: 30 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8, delay: 0.4 }}
                className="relative"
              >
                {VectorComponent ? (
                  /* Custom Vector Component */
                  <VectorComponent />
                ) : useVectors ? (
                  /* Legacy Vector Graphics Version */
                  <DevelopmentTeamVectors />
                ) : (
                  /* Default Dashboard Vector */
                  <DashboardVector />
                )}
              </motion.div>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
}

// Legacy Vector Graphics Component for Development Team Visualization (kept for backward compatibility)
const DevelopmentTeamVectors = () => {
  return (
    <div className="relative w-full h-[500px] flex items-center justify-center">
      {/* Main Development Hub */}
      <motion.div
        initial={{ opacity: 0, scale: 0.8 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ duration: 0.8, delay: 0.4 }}
        className="relative"
      >
        {/* Central Hub Circle */}
        <div className="w-48 h-48 bg-gradient-to-br from-accent to-purple-600 rounded-full flex items-center justify-center relative">
          <div className="w-32 h-32 bg-white/20 rounded-full flex items-center justify-center backdrop-blur-sm">
            <svg className="w-16 h-16 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
            </svg>
          </div>
          
          {/* Pulse Animation Ring */}
          <div className="absolute inset-0 rounded-full bg-accent/30 animate-ping"></div>
        </div>

        {/* Orbiting Developer Icons */}
        <motion.div
          animate={{ rotate: 360 }}
          transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
          className="absolute inset-0 w-48 h-48"
        >
          {/* Frontend Developer */}
          <div className="absolute -top-6 left-1/2 transform -translate-x-1/2 w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center">
            <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
            </svg>
          </div>

          {/* Backend Developer */}
          <div className="absolute top-1/2 -right-6 transform -translate-y-1/2 w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 rounded-full flex items-center justify-center">
            <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
            </svg>
          </div>

          {/* Mobile Developer */}
          <div className="absolute -bottom-6 left-1/2 transform -translate-x-1/2 w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 rounded-full flex items-center justify-center">
            <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 18h.01M8 21h8a1 1 0 001-1V4a1 1 0 00-1-1H8a1 1 0 00-1 1v16a1 1 0 001 1z" />
            </svg>
          </div>

          {/* UI/UX Designer */}
          <div className="absolute top-1/2 -left-6 transform -translate-y-1/2 w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-full flex items-center justify-center">
            <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.536L16.732 3.732z" />
            </svg>
          </div>
        </motion.div>

        {/* Skill Badges */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.8 }}
          className="absolute -bottom-16 left-1/2 transform -translate-x-1/2 flex gap-2"
        >
          <div className="px-3 py-1 bg-blue-500/20 text-blue-300 border border-blue-500/30 rounded-full text-sm font-manrope">
            React
          </div>
          <div className="px-3 py-1 bg-green-500/20 text-green-300 border border-green-500/30 rounded-full text-sm font-manrope">
            Node.js
          </div>
          <div className="px-3 py-1 bg-purple-500/20 text-purple-300 border border-purple-500/30 rounded-full text-sm font-manrope">
            Mobile
          </div>
        </motion.div>
      </motion.div>
    </div>
  );
};