"use client";

import { useEffect, useRef } from "react";
import Link from "next/link";
import { getAllServiceLinks } from "@/data/services";

/**
 * Full-screen dark video hero ("Power AI" design).
 *  - Looping background video with a JS-controlled fade loop (0.5s fade-in at
 *    start, 0.5s fade-out at end via requestAnimationFrame; on ended → opacity
 *    0, 100ms pause, replay).
 *  - Blurred dark overlay shape centered behind the content (no gradient
 *    overlays on the video itself).
 *  - Brand type & color: Google Sans only (headline + body), orange→gold
 *    gradient "AI", token colors throughout.
 *  - Liquid-glass logo marquee pinned to the bottom.
 *
 * Note: the site's global <Header /> replaces the spec's in-hero navbar.
 */

// Self-hosted copy of the original hero clip (perf: no third-party CDN).
const VIDEO_SRC = "/videos/hero-bg.mp4";

// Services marquee — real internal links (SEO: crawlable, descriptive anchors).
const SERVICES = getAllServiceLinks().slice(0, 12);

const FADE = 0.5; // seconds

export default function HeroVideo() {
  const videoRef = useRef(null);

  // Custom fade loop: fade in over the first 0.5s, fade out over the last
  // 0.5s, then reset → wait 100ms → replay.
  useEffect(() => {
    const v = videoRef.current;
    if (!v) return;
    let raf;
    let replayTimer;

    const tick = () => {
      if (v.duration) {
        const t = v.currentTime;
        let opacity = 1;
        if (t < FADE) opacity = t / FADE;
        else if (v.duration - t < FADE) opacity = Math.max(0, (v.duration - t) / FADE);
        v.style.opacity = opacity;
      }
      raf = requestAnimationFrame(tick);
    };

    const onEnded = () => {
      v.style.opacity = 0;
      replayTimer = setTimeout(() => {
        v.currentTime = 0;
        v.play();
      }, 100);
    };

    v.addEventListener("ended", onEnded);
    raf = requestAnimationFrame(tick);

    return () => {
      cancelAnimationFrame(raf);
      clearTimeout(replayTimer);
      v.removeEventListener("ended", onEnded);
    };
  }, []);

  return (
    <div className="relative overflow-hidden bg-background text-foreground">
      {/* Background video — no gradient overlays */}
      <video
        ref={videoRef}
        src={VIDEO_SRC}
        autoPlay
        muted
        playsInline
        preload="metadata"
        className="absolute inset-0 h-full w-full object-cover"
        style={{ opacity: 0 }}
      />

      {/* Hero */}
      <section className="relative z-10 flex min-h-[calc(100svh-5rem)] flex-col overflow-visible">
        {/* Blurred overlay shape behind the content */}
        <div className="pointer-events-none absolute left-1/2 top-1/2 h-[527px] w-[984px] max-w-none -translate-x-1/2 -translate-y-1/2 bg-background opacity-90 blur-[82px]" />

        {/* Content — vertically centered */}
        <div className="relative flex flex-1 flex-col items-center justify-center px-6 text-center">
          <h1 className="font-heading font-medium leading-[1.02] tracking-[-0.024em] text-[clamp(72px,15vw,220px)]">
            <span className="text-foreground">Cerkel </span>
            <span
              className="bg-clip-text text-transparent"
              style={{
                backgroundImage:
                  "linear-gradient(to right, rgb(var(--primary)), rgb(var(--accent)))",
              }}
            >
              AI
            </span>
          </h1>

          <p className="mt-[9px] max-w-md text-lg leading-8 text-muted-foreground">
            We design, build and scale web, mobile
            <br />
            and AI products that perform.
          </p>

          <a
            href="/contact"
            className="liquid-glass mt-[25px] inline-flex items-center rounded-full px-[29px] py-[17px] text-sm font-medium text-foreground transition-transform hover:scale-[1.03]"
          >
            Start a project
          </a>
        </div>

        {/* Logo marquee — pinned to the bottom */}
        <div className="relative pb-10">
          <div className="mx-auto flex max-w-5xl items-center gap-12 px-6">
            <p className="shrink-0 text-sm leading-snug text-muted-foreground">
              Services we deliver
              <br />
              end to end
            </p>

            <div className="relative flex-1 overflow-hidden [mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)]">
              <div className="animate-marquee-20 flex w-max items-center gap-16">
                {[...SERVICES, ...SERVICES].map(({ name, slug }, i) => (
                  <Link
                    key={`${slug}-${i}`}
                    href={`/services/${slug}`}
                    className="group flex items-center gap-3"
                  >
                    <span className="liquid-glass flex h-6 w-6 items-center justify-center rounded-lg text-xs font-semibold text-primary">
                      {name[0]}
                    </span>
                    <span className="whitespace-nowrap font-heading text-base font-semibold text-foreground transition-colors group-hover:text-primary">
                      {name}
                    </span>
                  </Link>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}