"use client";

import type React from "react";

import { cn } from "@/lib/utils";
import { ArrowUpRight } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import {
  motion,
  useMotionTemplate,
  useMotionValue,
  useSpring,
} from "motion/react";
import { useEffect, useRef, useState } from "react";

interface TeamMember {
  name: string;
  role: string;
  image: string;
  bio: string;
  variant: "pink" | "indigo" | "orange";
  href: string;
}

export function MarketingTeamSection() {
  const [isLoaded, setIsLoaded] = useState(false);
  const sectionRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    setIsLoaded(true);

    // Add subtle parallax effect on scroll
    const handleScroll = () => {
      if (!sectionRef.current) return;
      const cards = sectionRef.current.querySelectorAll(".team-card");

      cards.forEach((card, i) => {
        const rect = card.getBoundingClientRect();
        const centerY = rect.top + rect.height / 2;
        const viewportHeight = window.innerHeight;
        const distance = centerY - viewportHeight / 2;
        const parallaxFactor = distance * 0.02; // Reduced factor for subtler effect

        // Apply subtle parallax to the image
        const image = card.querySelector(".card-image") as HTMLElement;
        if (image) {
          // Use translateY with a smaller factor and ensure the image is scaled up enough to prevent gaps
          image.style.transform = `translateY(${parallaxFactor}px) scale(1.08)`;
        }
      });
    };

    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  const teamMembers: TeamMember[] = [
    {
      name: "Sophia Chen",
      role: "CEO",
      bio: "Leading our vision and strategy with over 15 years in tech",
      image: "/avatars/sofia-chen.png",
      variant: "pink",
      href: "/team/sophia-chen",
    },
    {
      name: "Marcus Rivera",
      role: "CTO",
      bio: "Driving innovation and technical excellence",
      image: "/avatars/marcus-rivera.png",
      variant: "indigo",
      href: "/team/marcus-rivera",
    },
    {
      name: "Amara Okafor",
      role: "Design",
      bio: "Creating intuitive and beautiful product experiences",
      image: "/avatars/amara-okafor.png",
      variant: "orange",
      href: "/team/amara-okafor",
    },
    {
      name: "Ethan Nakamura",
      role: "Engineering",
      bio: "Building robust systems that scale with precision",
      image: "/avatars/ethan-nakamura.png",
      variant: "indigo",
      href: "/team/ethan-nakamura",
    },
    {
      name: "Olivia Patel",
      role: "Marketing",
      bio: "Crafting our brand story and market presence",
      image: "/avatars/olivia-patel.png",
      variant: "pink",
      href: "/team/olivia-patel",
    },
    {
      name: "Noah Bergström",
      role: "Customer",
      bio: "Ensuring exceptional experiences at every touchpoint",
      image: "/avatars/noah-bergstrom.png",
      variant: "orange",
      href: "/team/noah-bergstrom",
    },
  ];

  return (
    <section
      ref={sectionRef}
      className={cn(
        "py-24 px-6 md:px-12 lg:px-24 relative overflow-hidden",

        "transition-colors duration-700"
      )}
    >
      {/* Subtle background grain texture */}
      <div
        className="absolute inset-0 opacity-[0.015] dark:opacity-[0.03] pointer-events-none z-0"
        style={{
          backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`,
        }}
      />

      <div className=" mx-auto relative z-10">
        {/* Header */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: isLoaded ? 1 : 0, y: isLoaded ? 0 : 20 }}
          transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
          className="mb-16 md:mb-24"
        >
          <motion.h2
            className={cn(
              "text-[2rem] md:text-[2.5rem] lg:text-[3rem]",
              "leading-tight font-semibold tracking-[-0.02em]",
              "text-zinc-900 dark:text-zinc-50",
              "transition-colors duration-700"
            )}
          >
            Leadership
          </motion.h2>

          <motion.div
            initial={{ width: 0, opacity: 0 }}
            animate={{ width: "4rem", opacity: 1 }}
            transition={{ duration: 0.8, delay: 0.2, ease: [0.16, 1, 0.3, 1] }}
            className="h-px bg-zinc-900 dark:bg-zinc-50 opacity-20 my-6"
          />

          <motion.p
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: isLoaded ? 1 : 0, y: isLoaded ? 0 : 10 }}
            transition={{ duration: 0.8, delay: 0.3, ease: [0.16, 1, 0.3, 1] }}
            className={cn(
              "text-[1.125rem] md:text-[1.25rem]",
              "leading-relaxed font-normal max-w-xl",
              "text-zinc-600 dark:text-zinc-300",
              "transition-colors duration-700"
            )}
          >
            Dedicated to innovation and excellence, our leadership team brings
            diverse expertise to guide our vision forward.
          </motion.p>
        </motion.div>

        {/* Team Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {teamMembers.map((member, index) => (
            <TeamMemberCard
              key={index}
              {...member}
              index={index}
              isLoaded={isLoaded}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

interface TeamMemberCardProps extends TeamMember {
  index: number;
  isLoaded: boolean;
}

function TeamMemberCard({
  name,
  role,
  bio,
  image,
  variant,
  href,
  index,
  isLoaded,
}: TeamMemberCardProps) {
  const mouseX = useMotionValue(0);
  const mouseY = useMotionValue(0);

  const rotateX = useSpring(0, { stiffness: 150, damping: 20 });
  const rotateY = useSpring(0, { stiffness: 150, damping: 20 });
  const brightness = useSpring(1, { stiffness: 150, damping: 20 });

  const cardRef = useRef<HTMLDivElement>(null);
  const [isHovered, setIsHovered] = useState(false);

  function onMouseMove({
    currentTarget,
    clientX,
    clientY,
  }: React.MouseEvent<HTMLDivElement>) {
    if (!cardRef.current) return;

    const { left, top, width, height } = currentTarget.getBoundingClientRect();

    const x = clientX - left;
    const y = clientY - top;

    // Calculate rotation based on mouse position - reduce the rotation amount
    const rotateXValue = ((y - height / 2) / 70) * -1; // Reduced from 50 to 70
    const rotateYValue = (x - width / 2) / 70; // Reduced from 50 to 70

    rotateX.set(rotateXValue);
    rotateY.set(rotateYValue);
    brightness.set(1.03);

    // Update mouseX and mouseY for the spotlight effect
    mouseX.set(x);
    mouseY.set(y);
  }

  function onMouseLeave() {
    rotateX.set(0);
    rotateY.set(0);
    brightness.set(1);
    setIsHovered(false);
  }

  // Create a spotlight effect that follows the cursor
  const spotlightX = useSpring(mouseX, { stiffness: 300, damping: 30 });
  const spotlightY = useSpring(mouseY, { stiffness: 300, damping: 30 });

  const spotlightBackground = useMotionTemplate`
    radial-gradient(
      180px circle at ${spotlightX}px ${spotlightY}px,
      rgba(255, 255, 255, 0.12),
      transparent 80%
    )
  `;

  return (
    <motion.div
      initial={{ opacity: 0, y: 40 }}
      animate={{
        opacity: isLoaded ? 1 : 0,
        y: isLoaded ? 0 : 40,
        filter: "blur(0px)",
        scale: 1,
      }}
      transition={{
        duration: 0.9,
        delay: 0.15 * index,
        ease: [0.16, 1, 0.3, 1],
      }}
      style={{
        filter: "blur(8px)",
        scale: 0.95,
      }}
      className="team-card"
    >
      <div
        ref={cardRef}
        onMouseMove={onMouseMove}
        onMouseLeave={onMouseLeave}
        onMouseEnter={() => setIsHovered(true)}
        style={{
          transform: isHovered
            ? `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`
            : `perspective(1000px) rotateX(0deg) rotateY(0deg)`,
          transition: "transform 0.3s cubic-bezier(0.16, 1, 0.3, 1)",
        }}
      >
        <div className="block w-full group">
          <motion.div
            style={{
              filter: `brightness(${brightness})`,
            }}
            className={cn(
              "relative overflow-hidden rounded-2xl",
              "bg-white/90 dark:bg-zinc-900/90",
              "backdrop-blur-xl",
              "border border-zinc-200/50 dark:border-zinc-800/50",
              "transition-all duration-500",
              "hover:shadow-[0_8px_30px_rgb(0,0,0,0.06)]",
              "dark:hover:shadow-[0_8px_30px_rgb(0,0,0,0.2)]",
              "hover:border-zinc-300/70 dark:hover:border-zinc-700/70"
            )}
          >
            {/* Spotlight overlay */}
            <motion.div
              className="absolute inset-0 z-10 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-500"
              style={{ background: spotlightBackground }}
            />

            <div className="relative h-[360px] overflow-hidden">
              {/* <img
                src={image || "/placeholder.svg"}
                alt={name}
                sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                className={cn(
                  "object-cover card-image",
                  "transition-all duration-700 ease-out",
                  "scale-[1.08]", // Start with a larger scale to prevent gaps
                  "group-hover:scale-[1.12]", // Increase scale on hover
                  "filter saturate-[1.05] contrast-[1.02]"
                )}
                style={{
                  objectPosition: "center center",
                }}
              /> */}

              <Image
                src={image || "/placeholder.svg"}
                alt={name}
                fill
                sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                className={cn(
                  "object-cover card-image",
                  "transition-all duration-700 ease-out",
                  "scale-[1.08]", // Start with a larger scale to prevent gaps
                  "group-hover:scale-[1.12]", // Increase scale on hover
                  "filter saturate-[1.05] contrast-[1.02]"
                )}
                style={{
                  objectPosition: "center center",
                }}
                priority={index < 3}
                quality={90}
              />
            </div>

            <div
              className={cn(
                "absolute inset-0",
                "bg-gradient-to-t from-black/90 via-black/40 to-transparent",
                "transition-opacity duration-500",
                "group-hover:opacity-[0.85]"
              )}
            />

            <div className="absolute top-3 right-3 z-20">
              <motion.span
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.98 }}
                className={cn(
                  "px-2.5 py-1 rounded-lg text-xs font-medium",
                  "bg-white/90 text-zinc-800",
                  "dark:bg-zinc-900/90 dark:text-zinc-200",
                  "backdrop-blur-md",
                  "shadow-[0_2px_10px_rgba(0,0,0,0.04)]",
                  "dark:shadow-[0_2px_10px_rgba(0,0,0,0.2)]",
                  "border border-white/20 dark:border-zinc-800/50",
                  "transition-all duration-300",
                  "group-hover:bg-white/95 dark:group-hover:bg-zinc-800/95"
                )}
              >
                {role}
              </motion.span>
            </div>

            <div className="absolute bottom-0 left-0 right-0 p-5 z-20">
              <div className="flex items-center justify-between gap-3">
                <div className="space-y-1.5">
                  <motion.h3
                    className={cn(
                      "text-lg font-semibold leading-snug",
                      "text-white dark:text-zinc-100",
                      "transition-transform duration-300",
                      "group-hover:translate-x-0.5"
                    )}
                  >
                    {name}
                  </motion.h3>
                  <motion.p
                    className={cn(
                      "text-sm line-clamp-2",
                      "text-zinc-200 dark:text-zinc-300",
                      "transition-all duration-300",
                      "group-hover:text-white dark:group-hover:text-zinc-100"
                    )}
                  >
                    {bio}
                  </motion.p>
                </div>
                <motion.div
                  whileHover={{ scale: 1.1, rotate: -12 }}
                  whileTap={{ scale: 0.9 }}
                  className={cn(
                    "p-2 rounded-full",
                    "bg-white/10 dark:bg-zinc-800/50",
                    "backdrop-blur-md",
                    "group-hover:bg-white/20 dark:group-hover:bg-zinc-700/50",
                    "transition-colors duration-300",
                    "shadow-[0_2px_10px_rgba(0,0,0,0.1)]",
                    "dark:shadow-[0_2px_10px_rgba(0,0,0,0.3)]"
                  )}
                >
                  <ArrowUpRight className="w-4 h-4 text-white group-hover:-rotate-12 transition-transform duration-300" />
                </motion.div>
              </div>
            </div>
          </motion.div>
        </div>
      </div>
    </motion.div>
  );
}
Marketing Team BlocksA minimalistic marketing team section.
