"use client";

import * as React from "react";
import { motion, AnimatePresence } from "framer-motion";
import { ArrowRight, X, Check } from "lucide-react";
import { services, type Service } from "@/lib/content";
import { SectionHeading, Reveal } from "@/components/ui-stratops/reveal";
import { cn } from "@/lib/utils";

export function ServicesSection() {
  const [active, setActive] = React.useState<Service | null>(null);

  return (
    <section id="services" className="relative 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="What we do"
          title={
            <>
              Everything your business needs{" "}
              <span className="text-brand italic">to move forward.</span>
            </>
          }
          description="Six integrated service lines, one accountable delivery team. Pick the discipline — or combine them into a single transformation programme."
          className="mb-14"
        />

        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
          {services.map((service, i) => (
            <Reveal key={service.id} delay={i * 0.06}>
              <ServiceCard service={service} onOpen={() => setActive(service)} />
            </Reveal>
          ))}
        </div>
      </div>

      <ServiceDialog service={active} onClose={() => setActive(null)} />
    </section>
  );
}

function ServiceCard({
  service,
  onOpen,
}: {
  service: Service;
  onOpen: () => void;
}) {
  const Icon = service.icon;
  const [hovered, setHovered] = React.useState(false);

  return (
    <button
      type="button"
      onClick={onOpen}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      className={cn(
        "group relative flex h-full w-full flex-col items-start gap-4 overflow-hidden rounded-2xl border border-border/60 bg-card p-6 text-left transition-all duration-300",
        "hover:border-brand/40 hover:bg-card/80 hover:shadow-[0_20px_60px_-30px_var(--brand)]",
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand",
      )}
    >
      {/* Hover wash */}
      <div
        className="pointer-events-none absolute -right-12 -top-12 h-32 w-32 rounded-full opacity-0 blur-3xl transition-opacity duration-500 group-hover:opacity-100"
        style={{ background: "var(--brand)" }}
      />

      <div className="relative flex items-center gap-3">
        <span
          className={cn(
            "flex h-11 w-11 items-center justify-center rounded-xl border border-border/60 bg-background/60 text-brand transition-all duration-300",
            hovered && "border-brand/60 bg-brand/10",
          )}
        >
          <Icon className="h-5 w-5" strokeWidth={1.6} />
        </span>
        <span className="font-mono-num text-[10px] uppercase tracking-[0.24em] text-muted-foreground">
          0{services.indexOf(service) + 1}
        </span>
      </div>

      <h3 className="font-display text-2xl font-semibold leading-tight text-foreground">
        {service.title}
      </h3>

      <p className="text-sm leading-relaxed text-muted-foreground">
        {service.short}
      </p>

      <span className="mt-auto inline-flex items-center gap-1.5 pt-2 text-xs font-semibold text-iris">
        Learn more
        <ArrowRight
          className="h-3.5 w-3.5 transition-transform group-hover:translate-x-1"
        />
      </span>
    </button>
  );
}

function ServiceDialog({
  service,
  onClose,
}: {
  service: Service | null;
  onClose: () => void;
}) {
  React.useEffect(() => {
    if (service) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
    }
    return () => {
      document.body.style.overflow = "";
    };
  }, [service]);

  return (
    <AnimatePresence>
      {service && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.2 }}
          className="fixed inset-0 z-[70] flex items-end sm:items-center justify-center p-0 sm:p-6"
          role="dialog"
          aria-modal="true"
          aria-labelledby="service-dialog-title"
        >
          <div
            className="absolute inset-0 bg-background/70 backdrop-blur-sm"
            onClick={onClose}
          />
          <motion.div
            initial={{ y: 60, opacity: 0, scale: 0.98 }}
            animate={{ y: 0, opacity: 1, scale: 1 }}
            exit={{ y: 30, opacity: 0, scale: 0.98 }}
            transition={{ type: "spring", stiffness: 320, damping: 36 }}
            className="relative max-h-[88svh] w-full max-w-3xl overflow-y-auto rounded-t-3xl sm:rounded-3xl border border-border bg-card p-6 sm:p-10 shadow-2xl"
          >
            <button
              type="button"
              onClick={onClose}
              className="absolute right-4 top-4 inline-flex h-10 w-10 items-center justify-center rounded-full border border-border/60 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
              aria-label="Close"
            >
              <X className="h-4 w-4" />
            </button>

            <div className="flex items-center gap-3">
              <span className="flex h-12 w-12 items-center justify-center rounded-xl bg-brand/15 text-brand">
                <service.icon className="h-6 w-6" strokeWidth={1.6} />
              </span>
              <span className="font-mono-num text-[10px] uppercase tracking-[0.24em] text-muted-foreground">
                Service · 0{services.indexOf(service) + 1}
              </span>
            </div>

            <h3
              id="service-dialog-title"
              className="mt-5 font-display text-3xl font-semibold tracking-tight text-foreground sm:text-4xl"
            >
              {service.title}
            </h3>

            <p className="mt-3 text-base leading-relaxed text-muted-foreground">
              {service.detail.overview}
            </p>

            <div className="mt-8 grid gap-8 sm:grid-cols-2">
              <div>
                <h4 className="mb-3 font-mono-num text-[10px] uppercase tracking-[0.24em] text-brand">
                  Capabilities
                </h4>
                <ul className="flex flex-col gap-2.5">
                  {service.detail.capabilities.map((cap) => (
                    <li
                      key={cap}
                      className="flex items-start gap-2.5 text-sm text-foreground/85"
                    >
                      <span className="mt-1.5 h-1 w-1 flex-shrink-0 rounded-full bg-brand" />
                      <span>{cap}</span>
                    </li>
                  ))}
                </ul>
              </div>
              <div>
                <h4 className="mb-3 font-mono-num text-[10px] uppercase tracking-[0.24em] text-brand">
                  Typical deliverables
                </h4>
                <ul className="flex flex-col gap-2.5">
                  {service.detail.deliverables.map((del) => (
                    <li
                      key={del}
                      className="flex items-start gap-2.5 text-sm text-foreground/85"
                    >
                      <Check className="mt-0.5 h-3.5 w-3.5 flex-shrink-0 text-brand" />
                      <span>{del}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>

            <div className="mt-10 flex flex-col gap-3 sm:flex-row">
              <a
                href="#book"
                onClick={onClose}
                className="inline-flex items-center justify-center gap-2 rounded-full bg-brand px-6 py-3 text-sm font-semibold text-background transition-colors hover:bg-brand/90"
              >
                Engage us on this
                <ArrowRight className="h-4 w-4" />
              </a>
              <a
                href="#leadership"
                onClick={onClose}
                className="inline-flex items-center justify-center gap-2 rounded-full border border-border px-6 py-3 text-sm font-semibold text-foreground transition-colors hover:bg-muted"
              >
                Meet the partners
              </a>
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}