"use client";

import { TimelineAnimation } from "@/components/ui/timeline-animation";
import React, { useRef } from "react";

const CYBER_TEAM = [
  {
    id: "1",
    name: "Matt Payel",
    role: "C.E.O",
    quirk: "Loves pizza",
    img: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=880&auto=format&fit=crop",
  },
  {
    id: "2",
    name: "Jack Remon",
    role: "C.F.O",
    quirk: "Plays piano",
    img: "https://images.unsplash.com/photo-1623366302587-b38b1ddaefd9?q=80&w=1025&auto=format&fit=crop",
  },
  {
    id: "3",
    name: "Zane Carder",
    role: "Lead Dev",
    quirk: "Coffee addict",
    img: "https://images.unsplash.com/photo-1552058544-f2b08422138a?w=400&h=400&fit=crop",
  },
  {
    id: "4",
    name: "Abram Dias",
    role: "UX lead",
    quirk: "Gamer",
    img: "https://images.unsplash.com/flagged/photo-1573603867003-89f5fd7a7576?q=80&w=746&auto=format&fit=crop",
  },
];

const TeamCyber = () => {
  const timelineRef = useRef<HTMLDivElement>(null);

  return (
    <div
      className="bg-[#050505] min-h-screen py-24 px-6 font-mono text-white overflow-hidden relative"
      ref={timelineRef}
    >
      <div
        className="absolute inset-0 opacity-10 pointer-events-none"
        style={{
          backgroundImage:
            "linear-gradient(#00FF85 1px, transparent 1px), linear-gradient(90deg, #00FF85 1px, transparent 1px)",
          backgroundSize: "60px 60px",
        }}
      ></div>

      <div className="max-w-6xl mx-auto relative z-10">
        <TimelineAnimation
          timelineRef={timelineRef}
          animationNum={1}
          className="flex items-center gap-6 mb-20"
        >
          <h2 className="xl:text-6xl md:text-4xl text-3xl font-semibold uppercase tracking-tighter italic">
            Our_Human_Intelligence
          </h2>
        </TimelineAnimation>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-x-32 gap-y-32">
          {CYBER_TEAM.map((member, i) => (
            <TimelineAnimation
              key={member.id}
              timelineRef={timelineRef}
              animationNum={2 + i}
              className={`flex flex-col ${i % 2 !== 0 ? "md:mt-32" : ""}`}
            >
              <div className="relative p-1 border border-[#00FF85]/30 mb-8 inline-block self-start cursor-crosshair overflow-visible group">
                <div className="absolute -top-2 -left-2 w-6 h-6 border-t-2 border-l-2 border-[#00FF85] group-hover:scale-125 transition-transform"></div>
                <div className="absolute -bottom-2 -right-2 w-6 h-6 border-b-2 border-r-2 border-[#00FF85] group-hover:scale-125 transition-transform"></div>

                <div className="sm:w-72 w-full sm:h-80 h-96 bg-black overflow-hidden relative">
                  <img
                    src={member.img}
                    className="w-full h-full object-cover filter contrast-150 grayscale brightness-50 group-hover:brightness-100 group-hover:grayscale-0 group-hover:scale-105 transition-all duration-300"
                    alt={member.name}
                  />
                  <div className="absolute inset-0 bg-[#00FF85]/20 opacity-0 group-hover:opacity-40 pointer-events-none transition-opacity"></div>
                </div>

                <div className="absolute -bottom-6 right-0 text-[8px] text-[#00FF85] opacity-0 group-hover:opacity-100 transition-opacity uppercase tracking-widest">
                  [ ACCESS_LOG: {Math.random().toString(36).substring(7)} ]
                </div>
              </div>

              <h3 className="text-4xl font-bold mb-2 uppercase group-hover:text-[#00FF85] transition-colors inline-block cursor-default">
                {member.name}
              </h3>

              <div className="flex items-center justify-between gap-4 border-t border-white/10 pt-4">
                <span className="text-gray-500 text-xs italic tracking-widest">
                  {member.quirk}
                </span>
                <span className="bg-[#00FF85] text-black px-2 py-0.5 text-[10px] font-black tracking-widest">
                  [{member.role}]
                </span>
              </div>
            </TimelineAnimation>
          ))}
        </div>
      </div>
    </div>
  );
};
export default TeamCyber;