blackheart-website/src/components/sections/Team.tsx

"use client";

import { useState, useRef, useEffect, useCallback } from "react";
import Image from "next/image";
import { Instagram, ChevronLeft, ChevronRight } from "lucide-react";
import { siteContent } from "@/data/content";
import { SectionHeading } from "@/components/ui/SectionHeading";
import { Reveal } from "@/components/ui/Reveal";
import { TeamMemberModal } from "@/components/ui/TeamMemberModal";
import type { TeamMember } from "@/types";

export function Team() {
  const { team } = siteContent;
  const [selectedMember, setSelectedMember] = useState<TeamMember | null>(null);
  const scrollRef = useRef<HTMLDivElement>(null);
  const scrollTimer = useRef<ReturnType<typeof setTimeout>>(null);
  const isDragging = useRef(false);
  const dragStartX = useRef(0);
  const dragScrollLeft = useRef(0);
  const dragMoved = useRef(false);

  // Render 3 copies: [clone] [original] [clone]
  const tripled = [...team.members, ...team.members, ...team.members];

  // On mount, jump to the middle set (no animation)
  useEffect(() => {
    const el = scrollRef.current;
    if (!el) return;
    requestAnimationFrame(() => {
      const cardWidth = el.scrollWidth / 3;
      el.scrollLeft = cardWidth;
    });
  }, []);

  // When scroll settles, check if we need to loop
  const handleScroll = useCallback(() => {
    if (scrollTimer.current) clearTimeout(scrollTimer.current);
    scrollTimer.current = setTimeout(() => {
      const el = scrollRef.current;
      if (!el) return;
      const oneSetWidth = el.scrollWidth / 3;
      if (el.scrollLeft < oneSetWidth * 0.3) {
        el.style.scrollBehavior = "auto";
        el.scrollLeft += oneSetWidth;
        el.style.scrollBehavior = "";
      }
      if (el.scrollLeft > oneSetWidth * 1.7) {
        el.style.scrollBehavior = "auto";
        el.scrollLeft -= oneSetWidth;
        el.style.scrollBehavior = "";
      }
    }, 100);
  }, []);

  // Mouse drag handlers
  function handleMouseDown(e: React.MouseEvent) {
    const el = scrollRef.current;
    if (!el) return;
    isDragging.current = true;
    dragMoved.current = false;
    dragStartX.current = e.pageX;
    dragScrollLeft.current = el.scrollLeft;
    el.style.scrollBehavior = "auto";
    el.style.scrollSnapType = "none";
    el.style.cursor = "grabbing";
  }

  function handleMouseMove(e: React.MouseEvent) {
    if (!isDragging.current || !scrollRef.current) return;
    e.preventDefault();
    const dx = e.pageX - dragStartX.current;
    if (Math.abs(dx) > 3) dragMoved.current = true;
    scrollRef.current.scrollLeft = dragScrollLeft.current - dx;
  }

  function handleMouseUp() {
    if (!isDragging.current || !scrollRef.current) return;
    isDragging.current = false;
    scrollRef.current.style.scrollBehavior = "";
    scrollRef.current.style.scrollSnapType = "";
    scrollRef.current.style.cursor = "";
  }

  function handleCardClick(member: TeamMember) {
    // Don't open modal if user was dragging
    if (dragMoved.current) return;
    setSelectedMember(member);
  }

  function scroll(direction: "left" | "right") {
    if (!scrollRef.current) return;
    const amount = scrollRef.current.offsetWidth * 0.7;
    scrollRef.current.scrollBy({
      left: direction === "left" ? -amount : amount,
      behavior: "smooth",
    });
  }

  return (
    <section id="team" className="relative section-padding bg-neutral-50 dark:bg-[#050505]">
      <div className="section-divider absolute top-0 left-0 right-0" />

      <div className="section-container">
        <Reveal>
          <SectionHeading>{team.title}</SectionHeading>
        </Reveal>
      </div>

      {/* Carousel wrapper */}
      <Reveal>
        <div className="relative mt-10">
          {/* Scroll container */}
          <div
            ref={scrollRef}
            onScroll={handleScroll}
            onMouseDown={handleMouseDown}
            onMouseMove={handleMouseMove}
            onMouseUp={handleMouseUp}
            onMouseLeave={handleMouseUp}
            className="flex cursor-grab gap-4 overflow-x-auto px-6 pb-4 sm:px-8 scroll-smooth snap-x snap-mandatory select-none lg:px-[max(2rem,calc((100vw-72rem)/2+2rem))]"
            style={{ scrollbarWidth: "none" }}
          >
            {tripled.map((member, i) => (
              <div
                key={`${i}-${member.name}`}
                className="group relative w-[220px] shrink-0 cursor-pointer snap-start overflow-hidden rounded-2xl sm:w-[260px]"
                onClick={() => handleCardClick(member)}
              >
                {/* Photo */}
                <div className="aspect-[3/4] w-full overflow-hidden">
                  <Image
                    src={member.image}
                    alt={member.name}
                    width={260}
                    height={347}
                    className="h-full w-full object-cover transition-transform duration-700 ease-out group-hover:scale-105"
                  />
                </div>

                {/* Gradient overlay */}
                <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-80 transition-opacity duration-500 group-hover:opacity-100" />

                {/* Rose glow on hover */}
                <div className="absolute inset-0 bg-gradient-to-t from-rose-900/20 to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100" />

                {/* Content */}
                <div className="absolute bottom-0 left-0 right-0 p-4 translate-y-1 transition-transform duration-500 group-hover:translate-y-0">
                  <h3 className="text-base font-semibold text-white sm:text-lg">
                    {member.name}
                  </h3>
                  {member.instagram && (
                    <span
                      className="mt-1 inline-flex items-center gap-1.5 text-xs text-white/60 transition-colors hover:text-rose-400 sm:text-sm"
                      onClick={(e) => e.stopPropagation()}
                    >
                      <Instagram size={12} className="shrink-0" />
                      <a
                        href={member.instagram}
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        {member.instagram.split("/").filter(Boolean).pop()}
                      </a>
                    </span>
                  )}
                </div>
              </div>
            ))}
          </div>

          {/* Side navigation arrows */}
          <button
            onClick={() => scroll("left")}
            className="absolute left-2 top-1/2 -translate-y-1/2 hidden h-10 w-10 items-center justify-center rounded-full bg-black/50 text-white/80 backdrop-blur-sm transition-all hover:bg-rose-500/30 hover:text-white sm:flex"
            aria-label="Назад"
          >
            <ChevronLeft size={22} />
          </button>
          <button
            onClick={() => scroll("right")}
            className="absolute right-2 top-1/2 -translate-y-1/2 hidden h-10 w-10 items-center justify-center rounded-full bg-black/50 text-white/80 backdrop-blur-sm transition-all hover:bg-rose-500/30 hover:text-white sm:flex"
            aria-label="Вперёд"
          >
            <ChevronRight size={22} />
          </button>
        </div>
      </Reveal>

      <TeamMemberModal
        member={selectedMember}
        onClose={() => setSelectedMember(null)}
      />
    </section>
  );
}