"use client";

import { useState } from "react";
// import Link from "next/link"; // navigation temporarily disabled
import { motion } from "framer-motion";
import { useInView } from "react-intersection-observer";

// 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, Check, Gamepad, Database, Code, Palette } from "@/components/ui/icons";
import AnimatedButton from "@/components/ui/AnimatedButton";

/**
 * "What we do" — sticky scrollytelling (the site's flagship section).
 * Left: a pinned media frame whose image, number and progress rail sync to
 * the service chapter you're reading. Right: four full chapters — heading,
 * description, highlights, tags, link — all always in the DOM (SEO-safe).
 * Mobile: chapters stack with their image inline.
 */
const SERVICES = [
  {
    no: "01",
    Icon: Gamepad,
    title: "Game Development",
    desc: "Immersive 2D, 3D, AR/VR and multiplayer games for mobile, PC and console — from concept and game art to live ops and gamification.",
    points: ["Mobile, PC & console games", "Unity & Unreal engineering", "Multiplayer, AR/VR & live ops"],
    tags: ["Unity", "Unreal", "Multiplayer"],
    href: "/services/game-development",
    image: "/images/opt/Pillar1.webp",
  },
  {
    no: "02",
    Icon: Database,
    title: "Data Analytics & AI",
    desc: "BI, dashboards, predictive analytics and AI that turn raw data into intelligence and automation your team can act on with confidence.",
    points: ["BI, dashboards & visualization", "Predictive analytics & machine learning", "AI solutions & automation"],
    tags: ["Power BI", "Python", "AI / ML"],
    href: "/services/data-analytics-ai",
    image: "/images/opt/HeroBanner3.png",
  },
  {
    no: "03",
    Icon: Code,
    title: "Web Development",
    desc: "Corporate sites, e-commerce, web apps and custom software — engineered on a modern stack, secured and built to scale with your traffic.",
    points: ["Web apps & custom software", "Cloud, DevOps & cybersecurity", "SEO-first performance"],
    tags: ["Next.js", "Node.js", "Cloud"],
    href: "/services/web-development",
    image: "/images/opt/Pillar2.webp",
  },
  {
    no: "04",
    Icon: Palette,
    title: "Media & Creative",
    desc: "Branding, video, motion graphics, animation and social creative — on-brand content and campaigns that command attention everywhere.",
    points: ["Branding & visual identity", "Video, motion & 2D/3D animation", "Social & campaign creative"],
    tags: ["Branding", "Video", "Motion"],
    href: "/services/media-creative",
    image: "/images/opt/HeroBanner2.webp",
  },
];

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

const container = { hidden: {}, show: { transition: { staggerChildren: 0.12 } } };
const word = {
  hidden: { yPercent: 120 },
  show: { yPercent: 0, transition: { duration: 0.7, ease: EASE } },
};
const rise = {
  hidden: { opacity: 0, y: 40 },
  show: { opacity: 1, y: 0, transition: { duration: 0.65, ease: EASE } },
};

/** One chapter on the right — reports itself active when centered in view. */
function Chapter({ service, index, onActive }) {
  const { ref } = useInView({
    rootMargin: "-45% 0px -45% 0px",
    onChange: (inView) => inView && onActive(index),
  });

  const { no, Icon, title, desc, points, tags, href, image } = service;

  return (
    <motion.article
      ref={ref}
      variants={rise}
      initial="hidden"
      whileInView="show"
      viewport={{ once: true, amount: 0.2 }}
      className="py-10 first:pt-0 lg:min-h-[70vh] lg:py-16"
    >
      {/* inline image (mobile/tablet only) */}
      <div className="relative mb-6 overflow-hidden rounded-3xl border border-border lg:hidden">
        <span
          className="block aspect-[16/10] bg-cover bg-center"
          style={{ backgroundImage: `url(${image})` }}
        />
        <span className="pointer-events-none absolute inset-0 bg-gradient-to-t from-background/50 to-transparent" />
        <span className="absolute left-4 top-4 rounded-full border border-primary/40 bg-background/70 px-3 py-1 font-heading text-xs font-semibold text-primary backdrop-blur">
          {no}
        </span>
      </div>

      <div className="flex items-center gap-4">
        <span className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-primary to-accent text-primary-foreground shadow-lg shadow-primary/30">
          <Icon className="h-5 w-5" />
        </span>
        <span className="font-heading text-sm font-semibold text-primary">{no}</span>
      </div>

      <h3 className="mt-5 font-heading text-2xl font-semibold leading-snug sm:text-3xl">
        {title}
      </h3>

      <p className="mt-4 max-w-xl text-base leading-relaxed text-muted-foreground">{desc}</p>

      <ul className="mt-6 space-y-3">
        {points.map((p) => (
          <li key={p} className="flex items-center gap-3 text-sm text-foreground/90">
            <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary/15 text-primary">
              <Check className="h-3 w-3" />
            </span>
            {p}
          </li>
        ))}
      </ul>

      <ul className="mt-6 flex flex-wrap gap-2">
        {tags.map((t) => (
          <li
            key={t}
            className="rounded-full border border-border bg-surface/60 px-3 py-1 text-xs font-medium text-muted-foreground"
          >
            {t}
          </li>
        ))}
      </ul>

      <Link
        href={href}
        className="group mt-7 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:w-full" />
        </span>
        <span className="flex h-9 w-9 items-center justify-center rounded-full border border-primary/40 transition-all duration-300 group-hover:-rotate-45 group-hover:bg-primary group-hover:text-primary-foreground">
          <ArrowRight className="h-4 w-4" />
        </span>
      </Link>
    </motion.article>
  );
}

export default function WhatWeDo() {
  const [active, setActive] = useState(0);

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

      <div className="container relative">
        {/* Header */}
        <motion.div
          variants={container}
          initial="hidden"
          whileInView="show"
          viewport={{ once: true, amount: 0.5 }}
          className="mx-auto max-w-3xl text-center"
        >
          <motion.span
            variants={rise}
            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" />
            What we do
          </motion.span>

          <h2 className="mt-5 font-heading text-3xl font-bold leading-[1.12] tracking-tight sm:text-4xl md:text-5xl">
            <span className="inline-block overflow-hidden pb-[0.08em] align-bottom">
              <motion.span variants={word} className="inline-block">
                We&nbsp;help&nbsp;you&nbsp;build,&nbsp;launch&nbsp;and
              </motion.span>
            </span>{" "}
            <span className="inline-block overflow-hidden pb-[0.08em] align-bottom">
              <motion.span
                variants={word}
                className="animate-text-shimmer inline-block bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent"
              >
                scale with confidence.
              </motion.span>
            </span>
          </h2>
        </motion.div>

        {/* Scrollytelling */}
        <div className="mt-14 grid gap-10 lg:grid-cols-[1fr_1fr] lg:gap-16">
          {/* Sticky media frame (desktop) */}
          <div className="hidden lg:block">
            <div className="sticky top-28 h-[calc(100vh-9rem)] max-h-[44rem]">
              <div className="relative h-full overflow-hidden rounded-3xl border border-border">
                {/* image layers — all mounted, crossfade */}
                {SERVICES.map((s, i) => (
                  <motion.div
                    key={s.no}
                    initial={false}
                    animate={{ opacity: i === active ? 1 : 0, scale: i === active ? 1 : 1.06 }}
                    transition={{ duration: 0.7, ease: EASE }}
                    className="absolute inset-0"
                  >
                    <span
                      className="block h-full w-full bg-cover bg-center"
                      style={{ backgroundImage: `url(${s.image})` }}
                    />
                  </motion.div>
                ))}
                <span className="pointer-events-none absolute inset-0 bg-gradient-to-t from-background/85 via-background/20 to-background/30" />

                {/* giant number watermark */}
                <motion.span
                  key={`no-${active}`}
                  initial={{ opacity: 0, y: 24 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, ease: EASE }}
                  className="absolute right-6 top-4 font-heading text-8xl font-bold text-foreground/10"
                >
                  {SERVICES[active].no}
                </motion.span>

                {/* active title chip */}
                <motion.div
                  key={`chip-${active}`}
                  initial={{ opacity: 0, y: 14 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.45, ease: EASE }}
                  className="absolute bottom-6 left-6 flex items-center gap-3"
                >
                  <span className="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-primary to-accent text-primary-foreground shadow-lg shadow-primary/40">
                    {(() => {
                      const Icon = SERVICES[active].Icon;
                      return <Icon className="h-4 w-4" />;
                    })()}
                  </span>
                  <span className="font-heading text-lg font-semibold drop-shadow-[0_2px_12px_rgba(0,0,0,0.6)]">
                    {SERVICES[active].title}
                  </span>
                </motion.div>

                {/* progress rail */}
                <div className="absolute bottom-6 right-6 flex gap-1.5">
                  {SERVICES.map((s, i) => (
                    <span
                      key={s.no}
                      className={
                        "h-1.5 rounded-full transition-all duration-500 " +
                        (i === active ? "w-8 bg-primary" : "w-3 bg-foreground/25")
                      }
                    />
                  ))}
                </div>
              </div>
            </div>
          </div>

          {/* Chapters */}
          <div className="lg:divide-y lg:divide-border/60">
            {SERVICES.map((service, i) => (
              <Chapter key={service.no} service={service} index={i} onActive={setActive} />
            ))}
          </div>
        </div>

        {/* CTA */}
        <motion.div
          initial={{ opacity: 0, y: 24 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5, ease: EASE }}
          className="mt-10 flex justify-center"
        >
          <AnimatedButton href="/services" size="sm">
            Explore all services
          </AnimatedButton>
        </motion.div>
      </div>
    </section>
  );
}