"use client";

import { useState } from "react";
import { motion, PanInfo } from "framer-motion";
import { ArrowDown, FileText, Send, Hand } from "lucide-react";
import { useTranslations } from "next-intl";

const PROFILE_IMAGES = [
  "https://images.unsplash.com/photo-1556157382-97eda2d62296?w=600&auto=format&fit=crop&q=80",
  "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=600&auto=format&fit=crop&q=80",
  "https://images.unsplash.com/photo-1605379399642-870262d3d051?w=600&auto=format&fit=crop&q=80",
];

export function HeroSection() {
  const t = useTranslations("Hero");
  const tTech = useTranslations("TechStack");
  const [cards, setCards] = useState(PROFILE_IMAGES);

  const handleDragEnd = (event: any, info: PanInfo) => {
    // If the card is dragged beyond a certain threshold on X-axis (left or right)
    if (Math.abs(info.offset.x) > 100) {
      setCards((prevCards) => {
        const newCards = [...prevCards];
        const topCard = newCards.shift();
        if (topCard) newCards.push(topCard);
        return newCards;
      });
    }
  };

  return (
    <section
      id="hero"
      className="relative min-h-screen flex items-center justify-center overflow-hidden pt-20"
    >
      <div className="absolute inset-0 grid-pattern opacity-30" />

      {/* Decorative Blur Backgrounds */}
      <div className="absolute top-1/4 -left-32 w-96 h-96 rounded-full bg-accent/20 blur-[120px] animate-pulse-glow pointer-events-none" />
      <div
        className="absolute bottom-1/4 -right-32 w-96 h-96 rounded-full bg-purple-500/15 blur-[120px] animate-pulse-glow pointer-events-none"
        style={{ animationDelay: "2s" }}
      />
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] rounded-full bg-indigo-500/5 blur-[100px] pointer-events-none" />

      <div className="relative z-10 w-full max-w-6xl mx-auto px-6">
        <div className="grid lg:grid-cols-2 gap-12 lg:gap-8 items-center">

          {/* LEFT: Text Content */}
          <div className="text-center lg:text-left flex flex-col items-center lg:items-start order-2 lg:order-1">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.7, delay: 0.3 }}
              className="max-w-xl mb-10"
            >
              <p className="text-sm sm:text-base text-muted-foreground font-medium mb-1 tracking-wide">
                {t("greeting")}
              </p>
              <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight mb-5">
                <span className="gradient-text">{t("name")}</span>
              </h1>
              <p className="text-base sm:text-lg text-muted-foreground font-normal leading-relaxed">
                {t("taglineRest")}
              </p>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.7, delay: 0.7 }}
              className="flex flex-col sm:flex-row items-center gap-4 w-full sm:w-auto"
            >
              <a
                href="#contact"
                className="w-full sm:w-auto group inline-flex items-center justify-center gap-2 px-7 py-3.5 rounded-xl bg-gradient-to-r from-accent to-purple-500 text-white font-semibold text-sm shadow-lg shadow-accent/25 hover:shadow-accent/40 hover:scale-105 transition-all duration-300"
              >
                <Send size={16} />
                {t("ctaContact")}
              </a>
              <a
                href="#projects"
                className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-7 py-3.5 rounded-xl font-semibold text-sm border border-border hover:bg-muted/50 transition-all duration-300 hover:scale-105"
              >
                <FileText size={16} />
                {t("ctaProjects")}
              </a>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.7, delay: 0.9 }}
              className="mt-12 flex flex-col items-center lg:items-start gap-5 w-full relative z-30 pointer-events-auto"
            >
              <p className="text-sm font-semibold text-muted-foreground uppercase tracking-widest">
                {tTech("title")}
              </p>
              <div className="flex flex-wrap gap-4 md:gap-5 w-full justify-center lg:justify-start items-center">
                {[
                  { src: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/java/java-original.svg", alt: "Java" },
                  { src: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/spring/spring-original.svg", alt: "Spring Boot" },
                  { src: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/oracle/oracle-original.svg", alt: "Oracle" },
                  { src: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/docker/docker-original.svg", alt: "Docker" },
                ].map((icon) => (
                  <img key={icon.alt} src={icon.src} alt={icon.alt} title={icon.alt} className="w-9 h-9 md:w-11 md:h-11 opacity-60 grayscale transition-all duration-300 hover:opacity-100 hover:grayscale-0 hover:scale-125 hover:-translate-y-2 cursor-pointer drop-shadow-sm hover:drop-shadow-xl" />
                ))}
                <a
                  href="#tech-stack"
                  className="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full text-xs font-semibold border border-accent/40 text-accent bg-accent/10 hover:bg-accent/20 hover:border-accent/70 transition-all duration-300 hover:scale-105 whitespace-nowrap"
                >
                  {tTech("seeMore")}
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M5 12h14M12 5l7 7-7 7"/>
                  </svg>
                </a>
              </div>
            </motion.div>
          </div>

          {/* RIGHT: Swipeable Card Deck */}
          <motion.div
            initial={{ opacity: 0, scale: 0.8 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.8, delay: 0.4 }}
            className="order-1 lg:order-2 flex justify-center lg:justify-end relative w-full perspective-1000 h-[380px] sm:h-[450px]"
          >
            <div className="relative w-full max-w-[280px] sm:max-w-[320px] h-full mx-auto lg:mx-0 lg:mr-8 xl:mr-16">
              {cards.map((imgUrl, index) => {
                const isTop = index === 0;

                return (
                  <motion.div
                    key={imgUrl}
                    className="absolute inset-0 rounded-3xl overflow-hidden shadow-2xl border border-white/10 glass cursor-grab active:cursor-grabbing bg-card"
                    style={{
                      transformOrigin: "bottom center",
                      zIndex: cards.length - index,
                    }}
                    initial={false}
                    animate={{
                      x: 0,
                      scale: 1 - index * 0.06,
                      y: index * 20,
                      rotateZ: isTop ? 0 : index % 2 === 0 ? 3 : -3,
                      opacity: 1 - index * 0.2,
                    }}
                    transition={{
                      type: "spring",
                      stiffness: 300,
                      damping: 20,
                    }}
                    drag={isTop ? "x" : false}
                    dragConstraints={{ left: 0, right: 0 }}
                    dragElastic={0.8}
                    onDragEnd={isTop ? handleDragEnd : undefined}
                    whileHover={isTop ? { scale: 1.02, rotateZ: -1 } : {}}
                    whileTap={isTop ? { scale: 1.05 } : {}}
                  >
                    <img
                      src={imgUrl}
                      alt="Yolando Showcase"
                      className="w-full h-full object-cover pointer-events-none"
                    />

                    {/* Instructional Overlay only on top card */}
                    {isTop && (
                      <div className="absolute top-4 right-4 bg-background/60 backdrop-blur-md px-3 py-1.5 rounded-full border border-white/20 shadow-sm flex items-center gap-1.5 pointer-events-none">
                        <span className="text-[10px] font-bold tracking-widest uppercase truncate animate-pulse">
                          Swipe
                        </span>
                      </div>
                    )}
                  </motion.div>
                );
              })}
            </div>
          </motion.div>

        </div>
      </div>

      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 1, delay: 1.5 }}
        className="absolute bottom-8 left-1/2 -translate-x-1/2 z-20"
      >
        <a
          href="#experience"
          className="flex flex-col items-center gap-3 text-muted-foreground hover:text-accent transition-colors group"
        >
          <span className="text-xs font-mono tracking-wider uppercase">{t("scroll")}</span>
          <motion.div
            animate={{ y: [0, 8, 0] }}
            transition={{ duration: 1.5, repeat: Infinity }}
            className="w-10 h-10 rounded-full border-2 border-accent/30 flex items-center justify-center scroll-indicator-ring group-hover:border-accent/60 transition-colors"
          >
            <ArrowDown size={16} className="text-accent" />
          </motion.div>
        </a>
      </motion.div>
    </section>
  );
}
