"use client";

import { useEffect, useState } from "react";
// import Link from "next/link"; // navigation temporarily disabled
import { motion } from "framer-motion";
import { ArrowRight } from "@/components/ui/icons";

// Non-navigating stub — links still render but go nowhere. Restore the import
// above to re-enable navigation.
const Link = ({ href, onClick, children, ...props }) => (
  <a href="#" onClick={(e) => { e.preventDefault(); onClick?.(e); }} {...props}>
    {children}
  </a>
);
import AnimatedButton from "@/components/ui/AnimatedButton";

/**
 * Projects — expanding image columns. Five project strips side by side; the
 * active one unfolds wide to reveal its story while the rest compress into
 * slim image slivers with vertical titles. Hover/click/focus selects;
 * auto-rotates (paused on hover). Mobile gets fully-visible cards, so every
 * project stays crawlable.
 */
const PROJECTS = [
  {
    title: "Nebula Arena",
    slug: "nebula-arena",
    category: "Game Development",
    desc: "A cross-platform multiplayer arena with live ops and 60fps battles on mid-range phones.",
    tags: ["Unity", "Photon"],
    image: "/images/opt/Pillar1.webp",
  },
  {
    title: "Atlas Copilot",
    slug: "atlas-copilot",
    category: "AI Development",
    desc: "A GenAI assistant that answers ops questions from internal docs — cutting ticket volume in half.",
    tags: ["LangChain", "RAG"],
    image: "/images/opt/HeroBanner3.png",
  },
  {
    title: "Swiftcart",
    slug: "swiftcart",
    category: "Mobile App",
    desc: "A retail companion app with one-tap reorder and live delivery tracking for 200k+ users.",
    tags: ["Flutter", "Firebase"],
    image: "/images/opt/HeroBanner1.webp",
  },
  {
    title: "Pulseboard",
    slug: "pulseboard",
    category: "Data & Analytics",
    desc: "Realtime analytics that turns event streams into decisions — dashboards in under a second.",
    tags: ["ClickHouse", "Next.js"],
    image: "/images/opt/Pillar2.webp",
  },
  {
    title: "Meridian",
    slug: "meridian",
    category: "Web Platform",
    desc: "A fintech onboarding platform that took signup from days to minutes, fully compliant.",
    tags: ["Next.js", "PostgreSQL"],
    image: "/images/opt/HeroBanner2.webp",
  },
];

const EASE = [0.21, 0.47, 0.32, 0.98];

const rise = {
  hidden: { opacity: 0, y: 36 },
  show: { opacity: 1, y: 0, transition: { duration: 0.6, ease: EASE } },
};

export default function Projects() {
  const [active, setActive] = useState(0);
  const [paused, setPaused] = useState(false);

  // Gentle auto-rotation; pauses while the visitor interacts.
  useEffect(() => {
    if (paused) return;
    const id = setTimeout(() => setActive((a) => (a + 1) % PROJECTS.length), 5000);
    return () => clearTimeout(id);
  }, [active, paused]);

  return (
    <section className="relative overflow-hidden bg-background py-14 text-foreground md:py-16">
      <div className="pointer-events-none absolute -right-40 top-1/4 h-[28rem] w-[28rem] rounded-full bg-primary/10 blur-[150px]" />

      <div className="container relative">
        {/* Header */}
        <motion.div
          variants={rise}
          initial="hidden"
          whileInView="show"
          viewport={{ once: true, amount: 0.5 }}
          className="mx-auto max-w-3xl text-center"
        >
          <span className="inline-flex items-center gap-2 rounded-full border border-border bg-surface/60 px-4 py-1.5 text-xs font-semibold uppercase tracking-wider text-muted-foreground backdrop-blur">
            <span className="h-1.5 w-1.5 rounded-full bg-primary" />
            Our work
          </span>
          <h2 className="mt-5 font-heading text-3xl font-bold leading-[1.12] tracking-tight sm:text-4xl md:text-5xl">
            Selected{" "}
            <span className="animate-text-shimmer bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent">
              projects.
            </span>
          </h2>
        </motion.div>

        {/* Expanding image columns (desktop) */}
        <motion.div
          variants={rise}
          initial="hidden"
          whileInView="show"
          viewport={{ once: true, amount: 0.2 }}
          onMouseEnter={() => setPaused(true)}
          onMouseLeave={() => setPaused(false)}
          className="mt-14 hidden h-[32rem] gap-3 lg:flex"
        >
          {PROJECTS.map((p, i) => {
            const isActive = i === active;
            return (
              <div
                key={p.slug}
                onMouseEnter={() => setActive(i)}
                onFocus={() => setActive(i)}
                onClick={() => setActive(i)}
                tabIndex={0}
                role="button"
                aria-expanded={isActive}
                style={{
                  flexGrow: isActive ? 3.4 : 1,
                  transition: "flex-grow 0.7s cubic-bezier(0.4, 0, 0.2, 1)",
                }}
                className={
                  "group relative min-w-0 basis-0 cursor-pointer overflow-hidden rounded-3xl border outline-none " +
                  (isActive ? "border-primary/50 shadow-2xl shadow-primary/10" : "border-border")
                }
              >
                {/* image */}
                <span
                  className={
                    "absolute inset-0 bg-cover bg-center transition-transform duration-700 ease-out " +
                    (isActive ? "scale-100" : "scale-110 group-hover:scale-105")
                  }
                  style={{ backgroundImage: `url(${p.image})` }}
                />
                {/* washes */}
                <span
                  className={
                    "absolute inset-0 transition-opacity duration-500 " +
                    (isActive
                      ? "bg-gradient-to-t from-background/95 via-background/30 to-background/10"
                      : "bg-background/55 group-hover:bg-background/40")
                  }
                />

                {/* number — top left */}
                <span
                  className={
                    "absolute left-5 top-5 rounded-full border px-3 py-1 font-heading text-xs font-semibold backdrop-blur transition-colors duration-300 " +
                    (isActive
                      ? "border-primary/40 bg-background/70 text-primary"
                      : "border-border bg-background/50 text-muted-foreground")
                  }
                >
                  {String(i + 1).padStart(2, "0")}
                </span>

                {/* collapsed — vertical title */}
                <span
                  className={
                    "absolute bottom-6 left-1/2 -translate-x-1/2 whitespace-nowrap font-heading text-lg font-semibold text-foreground transition-opacity duration-300 " +
                    (isActive ? "opacity-0" : "opacity-100 delay-200")
                  }
                  style={{ writingMode: "vertical-rl", transform: "rotate(180deg)" }}
                >
                  {p.title}
                </span>

                {/* expanded content — stays mounted (opacity only) */}
                <div
                  className={
                    "absolute inset-x-0 bottom-0 w-[30rem] max-w-full p-7 transition-opacity duration-300 " +
                    (isActive ? "opacity-100 delay-300" : "pointer-events-none opacity-0")
                  }
                >
                  <span className="inline-flex rounded-full border border-primary/40 bg-primary/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-wider text-primary">
                    {p.category}
                  </span>
                  <h3 className="mt-3 font-heading text-2xl font-semibold leading-snug">
                    {p.title}
                  </h3>
                  <p className="mt-2.5 text-sm leading-relaxed text-foreground/85">{p.desc}</p>
                  <ul className="mt-4 flex flex-wrap gap-2">
                    {p.tags.map((t) => (
                      <li
                        key={t}
                        className="rounded-full border border-border bg-background/60 px-3 py-1 text-xs font-medium text-muted-foreground backdrop-blur"
                      >
                        {t}
                      </li>
                    ))}
                  </ul>
                  <Link
                    href="/portfolio"
                    className="group/link mt-5 inline-flex items-center gap-2 text-sm font-semibold text-primary"
                  >
                    <span className="relative">
                      View case study
                      <span className="absolute -bottom-0.5 left-0 h-px w-0 bg-primary transition-all duration-300 group-hover/link:w-full" />
                    </span>
                    <span className="flex h-8 w-8 items-center justify-center rounded-full border border-primary/40 transition-transform duration-300 group-hover/link:-rotate-45">
                      <ArrowRight className="h-3.5 w-3.5" />
                    </span>
                  </Link>
                </div>
              </div>
            );
          })}
        </motion.div>

        {/* Mobile — stacked cards, everything visible */}
        <motion.div
          variants={rise}
          initial="hidden"
          whileInView="show"
          viewport={{ once: true, amount: 0.1 }}
          className="mt-12 space-y-5 lg:hidden"
        >
          {PROJECTS.map((p, i) => (
            <Link
              key={p.slug}
              href="/portfolio"
              className="block overflow-hidden rounded-3xl border border-border bg-surface/70"
            >
              <div className="relative h-44 overflow-hidden">
                <span
                  className="absolute inset-0 bg-cover bg-center"
                  style={{ backgroundImage: `url(${p.image})` }}
                />
                <span className="absolute inset-0 bg-gradient-to-t from-surface to-transparent" />
                <span className="absolute left-4 top-4 rounded-full border border-primary/40 bg-background/70 px-3 py-1 text-[11px] font-semibold uppercase tracking-wider text-primary">
                  {p.category}
                </span>
              </div>
              <div className="p-6 pt-3">
                <h3 className="font-heading text-lg font-semibold">
                  <span className="mr-2 text-sm text-primary">
                    {String(i + 1).padStart(2, "0")}
                  </span>
                  {p.title}
                </h3>
                <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{p.desc}</p>
              </div>
            </Link>
          ))}
        </motion.div>

        {/* CTA */}
        <motion.div
          variants={rise}
          initial="hidden"
          whileInView="show"
          viewport={{ once: true }}
          className="mt-14 flex justify-center"
        >
          <AnimatedButton href="/portfolio" size="sm">
            View all projects
          </AnimatedButton>
        </motion.div>
      </div>
    </section>
  );
}