"use client";

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

// Each sector has a DISTINCT poster image AND a looping background video
const sectorMedia: Record<
  string,
  { poster: string; video: string }
> = {
  mining: { poster: "/markets/mining.png", video: "/video/mining.mp4" },
  security: { poster: "/markets/defence.png", video: "/video/defence.mp4" },
  logistics: { poster: "/markets/logistics.png", video: "/video/logistics.mp4" },
  public: { poster: "/markets/public-sector.png", video: "/video/jhb-skyline.mp4" },
  financial: { poster: "/markets/financial.png", video: "/video/boardroom.mp4" },
  healthcare: { poster: "/markets/healthcare.png", video: "/video/handshake.mp4" },
  manufacturing: { poster: "/markets/manufacturing.png", video: "/video/logistics.mp4" },
  retail: { poster: "/markets/retail.png", video: "/video/handshake.mp4" },
  energy: { poster: "/markets/energy.png", video: "/video/jhb-skyline.mp4" },
  telecoms: { poster: "/markets/telecoms.png", video: "/video/jhb-skyline.mp4" },
};

export function SectorsSection() {
  const [active, setActive] = React.useState<Sector>(sectors[0]);

  return (
    <section
      id="sectors"
      className="relative border-t border-border/60 bg-gradient-to-b from-background via-card/30 to-background py-20 sm:py-28 lg:py-32"
    >
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <SectionHeading
          eyebrow="Sectors we serve"
          title={
            <>
              Depth of experience, in{" "}
              <span className="text-brand italic">every dimension.</span>
            </>
          }
          description="The same disciplines behind our services — strategy, delivery, governance — tuned to the realities of your industry."
          className="mb-14"
        />

        <div className="grid gap-10 lg:grid-cols-[1.1fr_1fr] lg:gap-16">
          {/* Sector list */}
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
            {sectors.map((sector, i) => {
              const isActive = active.id === sector.id;
              const Icon = sector.icon;
              return (
                <Reveal key={sector.id} delay={i * 0.04} as="div">
                  <button
                    type="button"
                    onMouseEnter={() => setActive(sector)}
                    onFocus={() => setActive(sector)}
                    onClick={() => setActive(sector)}
                    className={cn(
                      "group flex w-full items-center gap-3 rounded-xl border p-3.5 text-left transition-all duration-300",
                      isActive
                        ? "border-brand/50 bg-card shadow-[0_10px_40px_-24px_var(--brand)]"
                        : "border-border/60 bg-card/30 hover:border-border hover:bg-card/60",
                    )}
                  >
                    <span
                      className={cn(
                        "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg border transition-colors",
                        isActive
                          ? "border-brand/60 bg-brand/15 text-brand"
                          : "border-border/60 bg-background/40 text-muted-foreground group-hover:text-foreground",
                      )}
                    >
                      <Icon className="h-4.5 w-4.5" strokeWidth={1.6} />
                    </span>
                    <div className="min-w-0 flex-1">
                      <div className="flex items-center gap-2">
                        <span className="font-mono-num text-[10px] uppercase tracking-[0.2em] text-muted-foreground">
                          {sector.index}
                        </span>
                      </div>
                      <span className="block truncate font-display text-base font-semibold text-foreground">
                        {sector.title}
                      </span>
                    </div>
                    <ArrowUpRight
                      className={cn(
                        "h-4 w-4 flex-shrink-0 transition-all",
                        isActive
                          ? "text-brand"
                          : "text-muted-foreground/50 group-hover:text-muted-foreground",
                      )}
                    />
                  </button>
                </Reveal>
              );
            })}
          </div>

          {/* Active sector detail */}
          <div className="relative lg:sticky lg:top-28 lg:h-fit">
            <div className="relative overflow-hidden rounded-2xl border border-border/60 bg-card">
              {/* Sector looping video banner */}
              <div className="relative h-44 overflow-hidden sm:h-52">
                <AnimatePresence mode="wait">
                  <motion.div
                    key={active.id}
                    initial={{ opacity: 0, scale: 1.06 }}
                    animate={{ opacity: 1, scale: 1 }}
                    exit={{ opacity: 0 }}
                    transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
                    className="absolute inset-0"
                  >
                    {(() => {
                      const media =
                        sectorMedia[active.id] ??
                        { poster: "/markets/strategy.png", video: "/video/boardroom.mp4" };
                      return (
                        <LoopingVideoBackground
                          src={media.video}
                          poster={media.poster}
                          alt={active.title}
                          overlayStyle={{
                            background:
                              "linear-gradient(180deg, oklch(0.12 0.05 258 / 0.40) 0%, oklch(0.15 0.06 258 / 0.88) 75%, var(--card) 100%)",
                          }}
                        />
                      );
                    })()}
                  </motion.div>
                </AnimatePresence>
                <div className="absolute bottom-4 left-6 flex items-center gap-3 sm:left-8">
                  <span className="flex h-11 w-11 items-center justify-center rounded-xl bg-brand/20 backdrop-blur-md ring-1 ring-brand/40">
                    <active.icon className="h-5.5 w-5.5 text-brand" strokeWidth={1.6} />
                  </span>
                  <span className="font-mono-num text-[10px] uppercase tracking-[0.24em] text-foreground/90 backdrop-blur-sm">
                    Sector {active.index}
                  </span>
                </div>
              </div>

              <div className="p-8 sm:p-10">
                <div
                  className="pointer-events-none absolute -right-20 -top-20 h-60 w-60 rounded-full opacity-20 blur-3xl"
                  style={{ background: "var(--brand)" }}
                />
                <AnimatePresence mode="wait">
                  <motion.div
                    key={active.id}
                    initial={{ opacity: 0, y: 12 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: -12 }}
                    transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
                    className="relative flex flex-col gap-5"
                  >
                    <div>
                      <h3 className="font-display text-3xl font-semibold tracking-tight text-foreground sm:text-4xl">
                        {active.title}
                      </h3>
                      <p className="mt-2 text-lg italic text-brand">
                        {active.tagline}
                      </p>
                    </div>
                    <p className="text-base leading-relaxed text-muted-foreground">
                      {active.detail}
                    </p>

                    {/* Challenges + Services */}
                    <div className="grid gap-5 sm:grid-cols-2">
                      <div>
                        <h4 className="mb-2.5 font-mono-num text-[10px] uppercase tracking-[0.24em] text-brand">
                          Typical challenges
                        </h4>
                        <ul className="flex flex-col gap-1.5">
                          {active.challenges.map((c) => (
                            <li
                              key={c}
                              className="flex items-start gap-2 text-sm text-foreground/85"
                            >
                              <span className="mt-1.5 h-1 w-1 flex-shrink-0 rounded-full bg-muted-foreground/60" />
                              {c}
                            </li>
                          ))}
                        </ul>
                      </div>
                      <div>
                        <h4 className="mb-2.5 font-mono-num text-[10px] uppercase tracking-[0.24em] text-brand">
                          How we help
                        </h4>
                        <ul className="flex flex-col gap-1.5">
                          {active.services.map((s) => (
                            <li
                              key={s}
                              className="flex items-start gap-2 text-sm text-foreground/85"
                            >
                              <span className="mt-1.5 h-1 w-1 flex-shrink-0 rounded-full bg-brand" />
                              {s}
                            </li>
                          ))}
                        </ul>
                      </div>
                    </div>

                    <a
                      href="#book"
                      className="mt-2 inline-flex w-fit items-center gap-2 rounded-full border border-border px-5 py-2.5 text-sm font-semibold text-foreground transition-colors hover:border-brand hover:bg-card/60"
                    >
                      Explore with us
                      <ArrowUpRight className="h-3.5 w-3.5 text-brand" />
                    </a>
                  </motion.div>
                </AnimatePresence>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}