"use client";

import { useState } from "react";
// import Link from "next/link"; // navigation temporarily disabled
import { AnimatePresence, motion } from "framer-motion";

// 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 { ArrowRight } from "@/components/ui/icons";
import AnimatedButton from "@/components/ui/AnimatedButton";

/**
 * "Our Expertise" — split layout + accordion + feature tags. The left panel
 * explains the active category; the right side is an accordion of the five
 * capability areas with technology tags. Collapsed panels stay mounted
 * (height-animated, never unmounted) so all content remains crawlable.
 * Brand-strict.
 */
const EXPERTISE = [
  {
    no: "01",
    title: "Web Development",
    desc: "High-performance web apps, enterprise platforms and SaaS products — engineered on a modern stack and built to scale with your traffic.",
    href: "/services/web-development",
    tags: ["Next.js", "React", "Node.js", "Enterprise Applications", "SaaS Platforms"],
    image: "/images/opt/HeroBanner1.webp",
  },
  {
    no: "02",
    title: "Mobile Development",
    desc: "Native and cross-platform apps that feel right on every device — shipped to both stores with performance users notice.",
    href: "/services/mobile-app-development",
    tags: ["Android", "iOS", "React Native", "Flutter", "Cross-Platform Apps"],
    image: "/images/opt/HeroBanner2.webp",
  },
  {
    no: "03",
    title: "Game Development",
    desc: "Immersive 2D, 3D and multiplayer experiences across mobile, PC and AR/VR — from concept to live ops.",
    href: "/services/game-development",
    tags: ["Unity", "Unreal Engine", "Multiplayer Systems", "AR/VR", "Mobile Games"],
    image: "/images/opt/Pillar1.webp",
  },
  {
    no: "04",
    title: "AI & Data Intelligence",
    desc: "Generative AI, intelligent agents and analytics that automate the routine and surface insight you can act on.",
    href: "/services/ai-development",
    tags: ["Generative AI", "AI Agents", "Data Analytics", "Machine Learning", "Automation"],
    image: "/images/opt/HeroBanner3.png",
  },
  {
    no: "05",
    title: "Cloud & DevOps",
    desc: "Secure, automated infrastructure and delivery pipelines that keep your systems fast, observable and always-on.",
    href: "/services/cloud-solutions",
    tags: ["AWS", "Azure", "Docker", "Kubernetes", "CI/CD"],
    image: "/images/opt/Pillar2.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 OurExpertise() {
  const [active, setActive] = useState(0);
  const current = EXPERTISE[active];

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

      <div className="container relative grid gap-12 lg:grid-cols-[2fr_3fr] lg:gap-20">
        {/* Left — sticky intro for the active category */}
        <motion.div
          variants={rise}
          initial="hidden"
          whileInView="show"
          viewport={{ once: true, amount: 0.3 }}
          className="relative overflow-hidden rounded-3xl border border-border p-7 sm:p-8 lg:sticky lg:top-32 lg:self-start"
        >
          {/* Panel background video (OurExperties) + washes for legibility.
              Poster = optimized still, so the panel paints instantly. */}
          <div className="pointer-events-none absolute inset-0">
            <video
              src="/videos/OurExperties.mp4"
              poster="/images/opt/OurExperties.webp"
              autoPlay
              loop
              muted
              playsInline
              preload="metadata"
              className="h-full w-full object-cover"
            />
            <div className="absolute inset-0 bg-background/75" />
            <div className="absolute inset-0 bg-gradient-to-t from-background via-background/50 to-transparent" />
          </div>

          <div className="relative">
          <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 expertise
          </span>

          <h2 className="mt-5 font-heading text-3xl font-bold leading-[1.12] tracking-tight sm:text-4xl md:text-5xl">
            Deep skills across{" "}
            <span className="animate-text-shimmer bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent">
              the full stack.
            </span>
          </h2>

          {/* Active category spotlight — copy crossfades per selection */}
          <div className="relative mt-8 min-h-[11rem]">
            <AnimatePresence mode="wait">
              <motion.div
                key={current.no}
                initial={{ opacity: 0, y: 16 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -12 }}
                transition={{ duration: 0.3, ease: EASE }}
              >
                <p className="font-heading text-6xl font-bold text-primary/15">{current.no}</p>
                <h3 className="mt-2 font-heading text-xl font-semibold">{current.title}</h3>
                <p className="mt-3 max-w-md text-sm leading-relaxed text-muted-foreground">
                  {current.desc}
                </p>
              </motion.div>
            </AnimatePresence>
          </div>

          <div className="mt-8">
            <AnimatedButton href="/services" size="sm">
              Explore all services
            </AnimatedButton>
          </div>
          </div>
        </motion.div>

        {/* Right — accordion (panels stay mounted for SEO) */}
        <motion.div
          variants={rise}
          initial="hidden"
          whileInView="show"
          viewport={{ once: true, amount: 0.15 }}
          className="border-t border-border"
        >
          {EXPERTISE.map(({ no, title, desc, href, tags }, i) => {
            const isOpen = i === active;
            return (
              <div key={no} className="border-b border-border">
                <button
                  onClick={() => setActive(i)}
                  aria-expanded={isOpen}
                  className="group flex w-full items-center gap-5 py-6 text-left sm:gap-7"
                >
                  <span
                    className={
                      "font-heading text-sm font-semibold transition-colors " +
                      (isOpen ? "text-primary" : "text-muted-foreground")
                    }
                  >
                    {no}
                  </span>
                  <span
                    className={
                      "flex-1 font-heading text-xl font-semibold leading-snug transition-colors sm:text-2xl " +
                      (isOpen ? "text-primary" : "text-foreground group-hover:text-primary")
                    }
                  >
                    {title}
                  </span>
                  {/* plus → minus */}
                  <span
                    className={
                      "relative h-5 w-5 shrink-0 transition-transform duration-300 " +
                      (isOpen ? "rotate-180" : "")
                    }
                  >
                    <span className="absolute left-0 top-1/2 h-0.5 w-full -translate-y-1/2 rounded-full bg-current text-primary" />
                    <span
                      className={
                        "absolute left-1/2 top-0 h-full w-0.5 -translate-x-1/2 rounded-full bg-current text-primary transition-opacity duration-300 " +
                        (isOpen ? "opacity-0" : "opacity-100")
                      }
                    />
                  </span>
                </button>

                {/* Panel — always mounted; height animates */}
                <motion.div
                  initial={false}
                  animate={{ height: isOpen ? "auto" : 0, opacity: isOpen ? 1 : 0 }}
                  transition={{ duration: 0.45, ease: EASE }}
                  className="overflow-hidden"
                >
                  <div className="pb-7 pl-10 sm:pl-14">
                    <p className="max-w-lg text-sm leading-relaxed text-muted-foreground lg:hidden">
                      {desc}
                    </p>
                    <ul className="mt-4 flex flex-wrap gap-2 lg:mt-0">
                      {tags.map((t) => (
                        <li
                          key={t}
                          className="rounded-full border border-primary/25 bg-primary/10 px-3.5 py-1.5 text-sm font-medium text-foreground/90 transition-colors hover:bg-primary hover:text-primary-foreground"
                        >
                          {t}
                        </li>
                      ))}
                    </ul>
                    <Link
                      href={href}
                      className="group/link mt-5 inline-flex items-center gap-2 text-sm font-semibold text-primary"
                    >
                      <span className="relative">
                        Explore {title}
                        <span className="absolute -bottom-0.5 left-0 h-px w-0 bg-primary transition-all duration-300 group-hover/link:w-full" />
                      </span>
                      <ArrowRight className="h-4 w-4 transition-transform duration-300 group-hover/link:translate-x-1" />
                    </Link>
                  </div>
                </motion.div>
              </div>
            );
          })}
        </motion.div>
      </div>
    </section>
  );
}