import Image from "next/image";
import Link from "next/link";
import type { ReactNode } from "react";
import { cn } from "@/lib/cn";
import { ROUTES } from "@/lib/routes";

interface ServicesShellProps {
  /** `detail` pages put the breadcrumb and content side by side. */
  variant?: "default" | "detail";
  children: ReactNode;
}

/** Full-viewport photo background + gradient scrim shared by every services page. */
export function ServicesShell({ variant = "default", children }: ServicesShellProps) {
  return (
    // `services-page` is also a CSS hook (see globals.css) — keep the class.
    <div className="services-page relative flex min-h-screen w-full flex-col overflow-hidden bg-[#0a1628]">
      <Image
        src="/images/services/bg.jpg"
        alt=""
        fill
        priority
        sizes="100vw"
        className="object-cover object-center"
      />
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-0 z-[1] bg-[linear-gradient(to_right,rgba(0,0,0,0.65)_0%,rgba(0,0,0,0.45)_35%,rgba(0,0,0,0.25)_65%,rgba(0,0,0,0.15)_100%)]"
      />

      <div
        className={cn(
          "relative z-[2] mx-auto flex w-full max-w-[1440px] flex-1 items-start px-[4vw] pt-[clamp(120px,18vh,200px)]",
          "max-[901px]:flex-col max-[901px]:pt-[clamp(80px,12vh,140px)]",
          "max-[481px]:px-6 max-[481px]:pt-10",
          variant === "detail"
            ? "justify-start gap-3 max-[901px]:gap-2"
            : "justify-between max-[901px]:gap-10",
        )}
      >
        {children}
      </div>

      <Link
        href={ROUTES.home}
        className="relative z-[2] block py-[clamp(30px,5vh,60px)] text-center text-[clamp(0.82rem,1.1vw,0.95rem)] font-light tracking-[0.3px] text-white max-[481px]:pb-[100px]"
      >
        &lt; Return to Home page
      </Link>
    </div>
  );
}

export function ServicesLeftColumn({
  variant = "default",
  children,
}: {
  variant?: "default" | "detail";
  children: ReactNode;
}) {
  return (
    <div
      className={cn(
        "relative",
        variant === "detail"
          ? "flex-none max-[901px]:max-w-full max-[901px]:flex-[0_0_100%]"
          : "max-w-[55%] flex-[0_0_55%] max-[901px]:max-w-full max-[901px]:flex-[0_0_100%]",
      )}
    >
      <span
        aria-hidden="true"
        className="pointer-events-none absolute top-1/2 -left-[5vw] z-0 -translate-y-1/2 text-[clamp(100px,14vw,190px)] leading-none font-black tracking-[8px] text-white/4 select-none max-[901px]:-left-[5px] max-[901px]:text-[clamp(60px,20vw,120px)] max-[481px]:text-[55px]"
      >
        Menu
      </span>
      {children}
    </div>
  );
}

export function ServicesRightColumn({
  variant = "default",
  children,
}: {
  variant?: "default" | "detail";
  children: ReactNode;
}) {
  return (
    <div
      className={cn(
        "relative",
        variant === "detail"
          ? "flex-1 max-[901px]:max-w-full max-[901px]:flex-[0_0_100%]"
          : "min-h-[250px] max-w-[38%] flex-[0_0_38%] pt-[clamp(10px,2vh,30px)] max-[901px]:min-h-0 max-[901px]:max-w-full max-[901px]:flex-[0_0_100%]",
      )}
    >
      {children}
    </div>
  );
}

const headingBase =
  "relative z-[1] text-[44px] font-normal tracking-[0.5px] text-white max-[481px]:text-[1.6rem]";

export function ServicesHeading({ breadcrumb = false }: { breadcrumb?: boolean }) {
  if (breadcrumb) {
    return (
      <h1 className={cn(headingBase, "mb-0 whitespace-nowrap")}>
        <Link
          href={ROUTES.services}
          className="cursor-pointer font-semibold text-white transition-opacity duration-300 hover:opacity-75"
        >
          Our Services
        </Link>
        <span className="mx-2 font-light text-white/50">&gt;</span>
      </h1>
    );
  }
  return <h1 className={cn(headingBase, "mb-[clamp(24px,3.5vh,45px)]")}>Our Services</h1>;
}

export function ServiceMenuList({
  items,
  activeSlug,
}: {
  items: { slug: string; label: string; href: string }[];
  activeSlug?: string;
}) {
  return (
    <ul className="relative z-[1]">
      {items.map((item) => (
        <li key={item.slug} className="mb-[clamp(6px,1vh,12px)]">
          <Link
            href={item.href}
            aria-current={item.slug === activeSlug ? "page" : undefined}
            className="relative inline-block py-[6px] text-left text-[30px] font-light tracking-[0.3px] text-[#d9d9d9] max-[481px]:text-[1.05rem]"
          >
            {item.label}
          </Link>
        </li>
      ))}
    </ul>
  );
}

export const serviceText =
  "mb-[clamp(12px,1.8vh,18px)] text-[clamp(0.82rem,1.1vw,0.95rem)] leading-[1.7] font-light text-[#d9d9d9]";
export const serviceSubtitle =
  "mb-[clamp(8px,1.2vh,14px)] text-[clamp(1.1rem,1.6vw,1.4rem)] font-medium tracking-[0.3px] text-mist";