"use client";

import { useRef } from "react";
// import Link from "next/link"; // navigation temporarily disabled
import { motion } from "framer-motion";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { useGSAP } from "@gsap/react";
import { Sparkles, ArrowRight } from "@/components/ui/icons";
import AnimatedButton from "@/components/ui/AnimatedButton";

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

gsap.registerPlugin(ScrollTrigger);

/**
 * "Cerkel AI" home section — product spotlight on brand tokens. Editorial
 * split header, a cinematic video panel in a gradient frame with floating
 * glass stat cards, and a capability chip strip. Framer Motion reveals.
 *
 * Video: /public/videos/cerkel-ai.mp4 (poster shows until it exists).
 */
const CAPABILITIES = [
  "Generative AI",
  "AI Chatbots & Agents",
  "Machine Learning",
  "Computer Vision",
  "Predictive Analytics",
  "Intelligent Automation",
];

const container = { hidden: {}, show: { transition: { staggerChildren: 0.12 } } };
const fade = {
  hidden: { opacity: 0, y: 30 },
  show: { opacity: 1, y: 0, transition: { duration: 0.6, ease: [0.21, 0.47, 0.32, 0.98] } },
};

export default function CerkelAI() {
  const root = useRef(null);

  // Scroll-zoom takeover: the media panel pins at the center of the screen,
  // then scales up until it covers the whole viewport (corners squaring off,
  // floating UI fading out) — all scrubbed to scroll, reversible.
  useGSAP(
    () => {
      const panel = document.querySelector(".ai-media");
      if (!panel) return;

      // offsetWidth/Height ignore transforms, so this stays correct on refresh.
      const coverScale = () =>
        Math.max(
          window.innerWidth / panel.offsetWidth,
          window.innerHeight / panel.offsetHeight
        ) * 1.02;

      const tl = gsap.timeline({
        scrollTrigger: {
          trigger: ".ai-media",
          start: "center center",
          end: "+=130%",
          pin: true,
          scrub: true,
          invalidateOnRefresh: true,
        },
      });

      tl.fromTo(".ai-media", { scale: 0.92 }, { scale: 1, duration: 0.2, ease: "none" })
        .to(".ai-ui", { opacity: 0, duration: 0.15, ease: "none" }, 0.22)
        .to(
          [".ai-frame", ".ai-clip"],
          { borderRadius: 0, duration: 0.2, ease: "none" },
          0.25
        )
        .to(".ai-media", { scale: coverScale, duration: 0.75, ease: "none" }, 0.25)
        .fromTo(".ai-video", { scale: 1.18 }, { scale: 1, duration: 0.95, ease: "none" }, 0);
    },
    { scope: root }
  );

  return (
    <section ref={root} className="relative overflow-hidden bg-background pb-14 pt-12 text-foreground md:pb-16 md:pt-14">
      {/* ambient brand glows */}
      <div className="pointer-events-none absolute -right-40 top-0 h-[32rem] w-[32rem] rounded-full bg-primary/10 blur-[150px]" />
      <div className="pointer-events-none absolute -left-40 bottom-0 h-[28rem] w-[28rem] rounded-full bg-accent/10 blur-[150px]" />

      <motion.div
        variants={container}
        initial="hidden"
        whileInView="show"
        viewport={{ once: true, amount: 0.2 }}
        className="container relative"
      >
        {/* Header — editorial split */}
        <div className="grid gap-8 lg:grid-cols-2 lg:items-end">
          <motion.div variants={fade}>
            <span className="inline-flex items-center gap-2 rounded-full border border-primary/30 bg-primary/10 px-4 py-1.5 text-xs font-semibold uppercase tracking-wider text-primary">
              <Sparkles className="h-3.5 w-3.5" />
              Cerkel AI
            </span>
            <h2 className="mt-5 font-heading text-3xl font-bold leading-tight tracking-tight sm:text-4xl md:text-5xl">
              Put AI to work across{" "}
              <span className="animate-text-shimmer bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent">
                every layer of your business.
              </span>
            </h2>
          </motion.div>

          <motion.div variants={fade} className="lg:pb-2">
            <p className="max-w-xl text-base leading-relaxed text-muted-foreground">
              From generative AI and intelligent agents to machine learning and automation,
              Cerkel AI helps you ship smarter products and streamline operations — safely,
              and at scale.
            </p>
            <div className="mt-6 flex flex-wrap items-center gap-4">
              <AnimatedButton href="/services/ai-development" size="sm">
                Explore Cerkel AI
              </AnimatedButton>
              <Link
                href="/contact"
                className="group inline-flex items-center gap-2 rounded-full border border-border bg-surface/50 px-5 py-2.5 text-sm font-semibold text-foreground backdrop-blur transition-colors hover:border-primary/50 hover:bg-surface"
              >
                Talk to our AI team
                <ArrowRight className="h-4 w-4 text-primary transition-transform group-hover:translate-x-0.5" />
              </Link>
            </div>
          </motion.div>
        </div>

        {/* Media panel — gradient frame + floating stat cards + scroll zoom */}
        <motion.div variants={fade} className="ai-media relative z-10 mt-14 will-change-transform">
          <div className="ai-frame rounded-3xl bg-gradient-to-br from-primary/50 via-border to-accent/30 p-px">
            <div className="ai-clip relative overflow-hidden rounded-[23px]">
              <video
                autoPlay
                loop
                muted
                playsInline
                poster="/images/opt/HeroBanner3.png"
                className="ai-video aspect-[16/9] w-full object-cover will-change-transform md:aspect-[21/9]"
              >
                <source src="/videos/Technology.mp4" type="video/mp4" />
              </video>

              {/* legibility wash */}
              <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-background/70 via-transparent to-background/20" />

              {/* badge — top left */}
              <div className="ai-ui absolute left-5 top-5 flex items-center gap-2 rounded-full border border-border bg-surface/70 px-3.5 py-1.5 text-xs font-medium text-foreground backdrop-blur">
                <span className="relative flex h-2 w-2">
                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-accent opacity-75" />
                  <span className="relative inline-flex h-2 w-2 rounded-full bg-accent" />
                </span>
                Powered by Cerkel AI
              </div>

              {/* stat card — bottom left (floats) */}
              <motion.div
                animate={{ y: [0, -10, 0] }}
                transition={{ duration: 5, repeat: Infinity, ease: "easeInOut" }}
                className="ai-ui absolute bottom-5 left-5 rounded-2xl border border-border bg-surface/80 p-4 backdrop-blur-md"
              >
                <p className="font-heading text-2xl font-bold text-foreground sm:text-3xl">
                  80<span className="text-primary">%</span>
                </p>
                <p className="mt-0.5 text-xs text-muted-foreground">
                  of routine work automated
                </p>
              </motion.div>

              {/* stat card — top right (floats, offset rhythm) */}
              <motion.div
                animate={{ y: [0, 10, 0] }}
                transition={{ duration: 6, repeat: Infinity, ease: "easeInOut", delay: 0.6 }}
                className="ai-ui absolute right-5 top-5 hidden rounded-2xl border border-border bg-surface/80 p-4 backdrop-blur-md sm:block"
              >
                <p className="font-heading text-2xl font-bold text-foreground sm:text-3xl">
                  24<span className="text-primary">/7</span>
                </p>
                <p className="mt-0.5 text-xs text-muted-foreground">
                  intelligent agents on duty
                </p>
              </motion.div>
            </div>
          </div>
        </motion.div>

        {/* Capability chips */}
        <motion.div variants={fade} className="mt-10 flex flex-wrap justify-center gap-2.5">
          {CAPABILITIES.map((c) => (
            <Link
              key={c}
              href="/services/ai-development"
              className="group inline-flex items-center gap-2 rounded-full border border-border bg-surface/60 px-4 py-2 text-sm text-muted-foreground backdrop-blur transition-colors hover:border-primary/50 hover:text-foreground"
            >
              <Sparkles className="h-3.5 w-3.5 text-primary" />
              {c}
              <ArrowRight className="h-3.5 w-3.5 -translate-x-1 text-primary opacity-0 transition-all group-hover:translate-x-0 group-hover:opacity-100" />
            </Link>
          ))}
        </motion.div>
      </motion.div>
    </section>
  );
}