"use client";

import * as React from "react";
import { motion, AnimatePresence } from "framer-motion";
import { ArrowUpRight, ChevronLeft, ChevronRight } from "lucide-react";
import { sectors } from "@/lib/content";
import { LoopingVideoBackground } from "@/components/ui-stratops/looping-video-background";
import { cn } from "@/lib/utils";

// Each sector has a video (mapped from the sectors section)
const sectorVideo: Record<string, string> = {
  mining: "/video/mining.mp4",
  security: "/video/defence.mp4",
  logistics: "/video/logistics.mp4",
  public: "/video/jhb-skyline.mp4",
  financial: "/video/boardroom.mp4",
  healthcare: "/video/handshake.mp4",
  manufacturing: "/video/logistics.mp4",
  retail: "/video/handshake.mp4",
  energy: "/video/jhb-skyline.mp4",
  telecoms: "/video/jhb-skyline.mp4",
};

const sectorPoster: Record<string, string> = {
  mining: "/markets/mining.png",
  security: "/markets/defence.png",
  logistics: "/markets/logistics.png",
  public: "/markets/public-sector.png",
  financial: "/markets/financial.png",
  healthcare: "/markets/healthcare.png",
  manufacturing: "/markets/manufacturing.png",
  retail: "/markets/retail.png",
  energy: "/markets/energy.png",
  telecoms: "/markets/telecoms.png",
};

export function IndustryShowcase() {
  const [active, setActive] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const current = sectors[active];

  // Auto-advance every 4.5 seconds
  React.useEffect(() => {
    if (paused) return;
    const t = setInterval(() => {
      setActive((i) => (i + 1) % sectors.length);
    }, 4500);
    return () => clearInterval(t);
  }, [paused]);

  const go = (dir: 1 | -1) => {
    setActive((i) => (i + dir + sectors.length) % sectors.length);
  };

  return (
    <section
      className="relative overflow-hidden border-y border-border/60 bg-background"
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
      aria-label="Industries we serve — showcase"
    >
      {/* Main carousel stage */}
      <div className="relative h-[420px] w-full overflow-hidden sm:h-[460px] md:h-[500px]">
        <AnimatePresence mode="wait">
          <motion.div
            key={current.id}
            initial={{ opacity: 0, scale: 1.04 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.98 }}
            transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
            className="absolute inset-0"
          >
            <LoopingVideoBackground
              src={sectorVideo[current.id] ?? "/video/boardroom.mp4"}
              poster={sectorPoster[current.id] ?? "/markets/strategy.png"}
              alt={current.title}
              overlayStyle={{
                background:
                  "linear-gradient(180deg, oklch(0.10 0.04 258 / 0.55) 0%, oklch(0.12 0.05 258 / 0.72) 40%, oklch(0.10 0.04 258 / 0.95) 100%), radial-gradient(50% 40% at 20% 70%, oklch(0.30 0.08 70 / 0.15) 0%, transparent 70%)",
              }}
            />
          </motion.div>
        </AnimatePresence>

        {/* Content overlay */}
        <div className="relative z-10 mx-auto flex h-full max-w-7xl flex-col justify-center px-4 sm:px-6 lg:px-8">
          <AnimatePresence mode="wait">
            <motion.div
              key={current.id}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -20 }}
              transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
              className="max-w-2xl"
            >
              {/* Eyebrow */}
              <div className="mb-4 flex items-center gap-2.5">
                <svg
                  viewBox="0 0 24 24"
                  className="h-3.5 w-3.5 text-gold"
                  fill="none"
                  aria-hidden="true"
                >
                  <path
                    d="M12 2L21 7V17L12 22L3 17V7L12 2Z"
                    stroke="currentColor"
                    strokeWidth="1.5"
                    strokeLinejoin="round"
                  />
                </svg>
                <span className="font-mono-num text-[11px] uppercase tracking-[0.28em] text-gold">
                  Industries we serve · {current.index} / 10
                </span>
              </div>

              {/* Sector icon + title */}
              <div className="flex items-center gap-4">
                <span className="flex h-14 w-14 items-center justify-center rounded-2xl bg-background/30 backdrop-blur-md ring-1 ring-white/15">
                  <current.icon className="h-7 w-7 text-foreground" strokeWidth={1.5} />
                </span>
                <h2 className="font-display text-[clamp(2rem,5vw,3.5rem)] font-semibold leading-[1.05] tracking-tight text-foreground">
                  {current.title}
                </h2>
              </div>

              {/* Tagline */}
              <p className="mt-3 text-lg italic text-gold sm:text-xl">
                {current.tagline}
              </p>

              {/* Detail */}
              <p className="mt-4 max-w-xl text-sm leading-relaxed text-foreground/70 sm:text-base">
                {current.detail}
              </p>

              {/* CTA */}
              <a
                href="#sectors"
                className="mt-6 inline-flex items-center gap-2 rounded-full bg-foreground px-5 py-2.5 text-sm font-semibold text-background transition-all hover:bg-gold hover:text-background"
              >
                Explore all sectors
                <ArrowUpRight className="h-3.5 w-3.5" />
              </a>
            </motion.div>
          </AnimatePresence>
        </div>

        {/* Navigation arrows */}
        <button
          type="button"
          onClick={() => go(-1)}
          className="absolute left-4 top-1/2 z-20 hidden -translate-y-1/2 items-center justify-center rounded-full border border-white/20 bg-background/30 backdrop-blur-md text-foreground transition-colors hover:bg-background/60 h-10 w-10 sm:flex"
          aria-label="Previous industry"
        >
          <ChevronLeft className="h-4 w-4" />
        </button>
        <button
          type="button"
          onClick={() => go(1)}
          className="absolute right-4 top-1/2 z-20 hidden -translate-y-1/2 items-center justify-center rounded-full border border-white/20 bg-background/30 backdrop-blur-md text-foreground transition-colors hover:bg-background/60 h-10 w-10 sm:flex"
          aria-label="Next industry"
        >
          <ChevronRight className="h-4 w-4" />
        </button>

        {/* Progress dots */}
        <div className="absolute bottom-6 left-1/2 z-20 flex -translate-x-1/2 items-center gap-1.5">
          {sectors.map((s, i) => (
            <button
              key={s.id}
              type="button"
              onClick={() => setActive(i)}
              className={cn(
                "h-1.5 rounded-full transition-all duration-300",
                i === active
                  ? "w-8 bg-gold"
                  : "w-1.5 bg-white/30 hover:bg-white/50",
              )}
              aria-label={`Go to ${s.title}`}
            />
          ))}
        </div>

        {/* Pause indicator */}
        {paused && (
          <span className="absolute right-6 top-6 z-20 rounded-full border border-white/20 bg-background/40 px-3 py-1 font-mono-num text-[10px] uppercase tracking-[0.2em] text-foreground/70 backdrop-blur-md">
            Paused
          </span>
        )}
      </div>

      {/* Thumbnail strip */}
      <div className="border-t border-border/60 bg-card/30">
        <div className="mx-auto max-w-7xl overflow-x-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center gap-1.5 py-3">
            {sectors.map((s, i) => {
              const Icon = s.icon;
              const isActive = i === active;
              return (
                <button
                  key={s.id}
                  type="button"
                  onClick={() => setActive(i)}
                  className={cn(
                    "group flex flex-shrink-0 items-center gap-2 rounded-lg border px-3 py-2 transition-all",
                    isActive
                      ? "border-gold/40 bg-gold/5"
                      : "border-transparent hover:border-border/60 hover:bg-card/40",
                  )}
                >
                  <Icon
                    className={cn(
                      "h-4 w-4 transition-colors",
                      isActive ? "text-gold" : "text-muted-foreground group-hover:text-foreground",
                    )}
                    strokeWidth={1.6}
                  />
                  <span
                    className={cn(
                      "text-xs font-medium transition-colors",
                      isActive ? "text-foreground" : "text-muted-foreground group-hover:text-foreground",
                    )}
                  >
                    {s.title}
                  </span>
                </button>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}