import Image from "next/image";
import { glyphCaptions, ServiceGlyph } from "@/components/home/ServiceGlyph";
import { TextLink } from "@/components/ui/Button";
import { revealProps } from "@/components/ui/reveal";
import type { ServiceModule } from "@/content/home";
import { serviceStills } from "@/content/media";
import { cn } from "@/lib/cn";
import { routes } from "@/lib/routes";

export function ServiceSection({ module, reverse = false }: { module: ServiceModule; reverse?: boolean }) {
  const titleId = `service-module-${module.index}`;
  const still = serviceStills[module.glyph];

  return (
    <article aria-labelledby={titleId} className="grid gap-10 border-t border-line py-14 lg:grid-cols-12 lg:items-center lg:gap-6 lg:py-20">
      <div className={cn("lg:col-span-6", reverse ? "lg:order-2 lg:col-start-7" : "lg:col-start-1")} {...revealProps()}>
        <p className="flex items-center gap-3 text-label uppercase text-muted">
          <span className="font-mono">{module.index}</span>
          <span aria-hidden="true" className="h-px w-8 bg-line-strong" />
          <span>{module.stage}</span>
        </p>
        <h3 id={titleId} className="mt-5 text-display-md">
          {module.name}
        </h3>
        <p className="mt-5 text-title text-ink">{module.promise}</p>
        <p className="mt-4 max-w-xl text-ink-soft">{module.body}</p>

        <ul className="mt-8 grid gap-x-6 sm:grid-cols-2" aria-label={`${module.name} deliverables`}>
          {module.deliverables.map((deliverable) => (
            <li key={deliverable} className="flex min-h-12 items-center gap-3 border-b border-line py-2.5 text-[0.9375rem]">
              <span aria-hidden="true" className="size-1.5 shrink-0 bg-signal" />
              {deliverable}
            </li>
          ))}
        </ul>

        <div className="mt-7 flex flex-wrap gap-x-8 gap-y-1">
          {module.links.map((link) => (
            <TextLink key={link.slug} href={routes.service(link.slug)}>
              {`Explore ${link.label.toLowerCase()}`}
            </TextLink>
          ))}
        </div>
      </div>

      <div
        className={cn("lg:col-span-5", reverse ? "lg:order-1 lg:col-start-1" : "lg:col-start-8")}
        {...revealProps(120)}
      >
        <figure className="relative overflow-hidden rounded-lg border border-line bg-surface">
          {still ? (
            <div className="relative aspect-[4/3] bg-paper-deep lg:aspect-[4/5]">
              <Image
                src={still.src}
                alt={module.imageAlt}
                fill
                sizes="(min-width: 1360px) 520px, (min-width: 1024px) 38vw, 92vw"
                placeholder="blur"
                className={cn("object-cover", still.position)}
              />
            </div>
          ) : (
            <>
              <span
                aria-hidden="true"
                className="pointer-events-none absolute -top-5 right-5 select-none text-[8.5rem] font-medium leading-none tracking-[-0.06em] text-ink/[0.045]"
              >
                {module.index}
              </span>
              <div className="relative px-7 pb-6 pt-9 sm:px-10">
                <ServiceGlyph kind={module.glyph} />
              </div>
            </>
          )}
          <figcaption className="border-t border-line px-6 py-4 font-mono text-data uppercase tracking-[0.08em] text-muted">
            {still ? <span className="text-ink">{module.index} · </span> : null}
            {glyphCaptions[module.glyph]}
          </figcaption>
        </figure>
      </div>
    </article>
  );
}