"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import KineticTitle from "@/components/KineticTitle";
import Reveal from "@/components/Reveal";
import { PILLARS, type Pillar } from "@/lib/site";

const ICONS: Record<string, React.ReactNode> = {
  connectivity: (
    <g>
      <circle cx="24" cy="24" r="4" />
      <circle cx="8" cy="10" r="3" />
      <circle cx="40" cy="10" r="3" />
      <circle cx="8" cy="38" r="3" />
      <circle cx="40" cy="38" r="3" />
      <path d="M11 12.5 21 21M37 12.5 27 21M11 35.5 21 27M37 35.5 27 27" />
    </g>
  ),
  cloud: (
    <g>
      <path d="M14 34a8 8 0 0 1 .8-15.96A11 11 0 0 1 36 21.5 7.5 7.5 0 0 1 35 36H15z" />
      <path d="M24 40v-9M20.5 34.5 24 31l3.5 3.5" />
    </g>
  ),
  cybersecurity: (
    <g>
      <path d="M24 5 8 11v12c0 10 7 17.5 16 20 9-2.5 16-10 16-20V11z" />
      <path d="M17.5 24l4.5 4.5 8.5-9" />
    </g>
  ),
  ai: (
    <g>
      <rect x="12" y="12" width="24" height="24" rx="4" />
      <path d="M24 4v8M24 36v8M4 24h8M36 24h8M20 20h.01M28 20h.01" />
      <path d="M19 28c1.5 1.6 3.2 2.4 5 2.4s3.5-.8 5-2.4" />
    </g>
  ),
};

function PillarIcon({ id }: { id: string }) {
  return (
    <svg
      viewBox="0 0 48 48"
      className="pillar-icon h-12 w-12"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.6"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden
    >
      {ICONS[id]}
    </svg>
  );
}

/** 04 — The Expertise: four pillars, each opening an accessible case-study modal. */
export default function Expertise() {
  const [active, setActive] = useState<Pillar | null>(null);
  const closeRef = useRef<HTMLButtonElement>(null);

  const close = useCallback(() => setActive(null), []);

  useEffect(() => {
    window.dispatchEvent(new CustomEvent("dm:lockscroll", { detail: !!active }));
    if (active) {
      closeRef.current?.focus();
      const onKey = (e: KeyboardEvent) => {
        if (e.key === "Escape") close();
      };
      window.addEventListener("keydown", onKey);
      return () => window.removeEventListener("keydown", onKey);
    }
  }, [active, close]);

  return (
    <section id="expertise" className="relative bg-obsidian py-28 md:py-40">
      <div className="mx-auto max-w-[1440px] px-6 md:px-10">
        <Reveal>
          <p className="kicker mb-6">03 — The Expertise</p>
        </Reveal>
        <KineticTitle
          as="h2"
          text="Four pillars. One backbone."
          className="font-display text-4xl font-black leading-[1.06] tracking-[-0.02em] text-ivory md:text-6xl"
        />
        <Reveal delay={0.1}>
          <p className="mt-6 max-w-2xl text-ivory/70">
            Everything Innovo Networks builds for SMEs and government rests on the
            same four disciplines. Open a pillar for the working detail.
          </p>
        </Reveal>

        <div className="mt-16 grid gap-px bg-ivory/10 sm:grid-cols-2 xl:grid-cols-4">
          {PILLARS.map((p, i) => (
            <Reveal key={p.key} delay={i * 0.06} className="bg-obsidian">
              <button
                type="button"
                onClick={() => setActive(p)}
                className="group flex h-full w-full flex-col items-start gap-6 px-7 py-10 text-left transition-colors duration-500 hover:bg-charcoal"
                aria-haspopup="dialog"
              >
                <span className="text-gold transition-transform duration-500 group-hover:-translate-y-1">
                  <PillarIcon id={p.key} />
                </span>
                <span>
                  <span className="font-mono block text-[0.6rem] uppercase tracking-[0.3em] text-warmgrey">
                    Pillar 0{i + 1}
                  </span>
                  <span className="font-display mt-2 block text-2xl font-black tracking-tight text-ivory">
                    {p.title}
                  </span>
                </span>
                <span className="text-[0.9rem] leading-relaxed text-ivory/60">{p.blurb}</span>
                <span className="btn-underline mt-auto font-mono text-[0.62rem] uppercase tracking-[0.26em] text-gold">
                  Case studies →
                </span>
              </button>
            </Reveal>
          ))}
        </div>
      </div>

      {/* Modal */}
      {active && (
        <div
          className="fixed inset-0 z-[80] flex items-end justify-center p-0 md:items-center md:p-8"
          role="dialog"
          aria-modal="true"
          aria-label={`${active.title} — case studies`}
        >
          <div
            className="absolute inset-0 bg-obsidian/80 backdrop-blur-sm"
            onClick={close}
            aria-hidden
          />
          <div className="relative z-10 max-h-[86svh] w-full max-w-2xl overflow-y-auto border border-ivory/10 bg-charcoal p-8 md:p-12">
            <div className="flex items-start justify-between gap-6">
              <div>
                <p className="kicker">The Expertise</p>
                <h3 className="font-display mt-3 text-3xl font-black tracking-tight text-ivory md:text-4xl">
                  {active.title}
                </h3>
              </div>
              <button
                ref={closeRef}
                type="button"
                onClick={close}
                className="font-mono text-[0.66rem] uppercase tracking-[0.28em] text-warmgrey transition-colors hover:text-gold"
              >
                Close ✕
              </button>
            </div>

            <p className="mt-7 leading-relaxed text-ivory/80">{active.detail}</p>

            <div className="mt-8">
              <div className="font-mono text-[0.62rem] uppercase tracking-[0.3em] text-gold">
                Selected work
              </div>
              <ul className="mt-4 space-y-3">
                {active.work.map((w) => (
                  <li key={w} className="flex gap-3 text-[0.95rem] text-ivory/75">
                    <span className="mt-[0.5em] block h-1 w-1 flex-shrink-0 rotate-45 bg-gold" aria-hidden />
                    {w}
                  </li>
                ))}
              </ul>
            </div>

            <p className="mt-8 border-t border-ivory/10 pt-6 text-[0.85rem] italic leading-relaxed text-warmgrey">
              {active.clientsNote}
            </p>

            <a
              href="#contact"
              onClick={close}
              className="mt-8 inline-block bg-gold px-6 py-3.5 font-mono text-[0.66rem] uppercase tracking-[0.24em] text-obsidian transition-colors hover:bg-amber"
            >
              Discuss {active.title.toLowerCase()} →
            </a>
          </div>
        </div>
      )}
    </section>
  );
}