Process Isometric

"use client";

import { type ComponentType, type CSSProperties } from "react";
import { motion, useReducedMotion } from "motion/react";

import { TextReveal } from "@/registry/ui/text-reveal";
import { IsoSearch } from "@/registry/ui/iso-search";
import { IsoPriority } from "@/registry/ui/iso-priority";
import { IsoDeploy } from "@/registry/ui/iso-deploy";
import { IsoGrowth } from "@/registry/ui/iso-growth";

type Scene = ComponentType<{ brand?: string; className?: string }>;

// This family carries its OWN theme so it installs anywhere with no project
// config: the amber accent is a local `--brand` variable, and the display font
// is loaded by the block itself (React 19 hoists + dedupes the stylesheet link).
const DISPLAY_FONT = '"Pixelify Sans", ui-sans-serif, system-ui, sans-serif';
const display: CSSProperties = { fontFamily: DISPLAY_FONT };

const steps: { Scene: Scene; title: string; description: string }[] = [
  { Scene: IsoSearch, title: "Finds", description: "Spots gaps, queries, and content ready to rank." },
  { Scene: IsoPriority, title: "Decides", description: "Prioritizes what actually moves the needle." },
  { Scene: IsoDeploy, title: "Executes", description: "Ships updates, fixes, and structure changes." },
  { Scene: IsoGrowth, title: "Compounds", description: "Learns from each change, then improves again." },
];

/**
 * "Autonomous system" process section — four isometric dioramas laid out as
 * numbered steps with a continuously-running badge. Self-contained theme (amber
 * accent via the `brand` prop → a local `--brand`; Pixelify display font loaded
 * by the block), light-mode, each step reveals on scroll. Composes the iso-*
 * illustrations and text-reveal.
 */
export function ProcessIsometric({ brand = "#FF4701" }: { brand?: string }) {
  const reduce = useReducedMotion();

  return (
    <section
      className="relative overflow-hidden bg-white px-5 py-16 text-neutral-950 sm:px-8 sm:py-20"
      style={{ ["--brand" as string]: brand }}
    >
      {/* Self-contained display font — hoisted + deduped by React 19. Loaded
          here (not next/font) so the block renders correctly wherever it's
          installed, with no project-level font config. */}
      {/* eslint-disable-next-line @next/next/no-page-custom-font */}
      <link
        rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap"
      />

      {/* dotted field + amber halo backdrop */}
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 -z-10 [background-image:radial-gradient(rgba(0,0,0,0.04)_1px,transparent_1px)] [background-size:22px_22px] [mask-image:radial-gradient(ellipse_at_center,black_40%,transparent_75%)]"
      />
      <div
        aria-hidden
        className="pointer-events-none absolute top-1/2 left-1/2 -z-10 h-[420px] w-[420px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-[color-mix(in_oklab,var(--brand)_8%,transparent)] blur-[120px]"
      />

      <div className="relative mx-auto max-w-6xl">
        <TextReveal as="p" className="text-center text-base text-black/55 sm:text-lg">
          SEO is no longer something you <em className="text-black/40">do</em>. It&rsquo;s
          something you <span className="text-[var(--brand)]">run</span>.
        </TextReveal>

        <TextReveal
          as="h2"
          delay={0.05}
          style={display}
          className="mt-4 text-center text-3xl leading-tight tracking-tight sm:text-4xl md:text-5xl"
        >
          Meet your autonomous
          <br />
          <span className="text-black/45">SEO system.</span>
        </TextReveal>

        <div className="relative mt-16">
          <ul className="relative grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4">
            {steps.map(({ Scene, title, description }, i) => {
              const dividers = [
                "",
                "border-t border-black/8 sm:border-t-0 sm:border-l",
                "border-t border-black/8 md:border-t-0 md:border-l",
                "border-t border-black/8 sm:border-l md:border-t-0",
              ][i];
              return (
                <li
                  key={title}
                  className={`group relative flex h-full flex-col overflow-hidden p-3 transition-colors duration-300 hover:bg-black/[0.015] ${dividers}`}
                >
                  <div className="relative aspect-5/4 w-full overflow-hidden rounded-xl">
                    <div
                      aria-hidden
                      className="absolute inset-0 opacity-0 transition-opacity duration-300 [background:radial-gradient(ellipse_at_50%_70%,rgba(217,119,6,0.07),transparent_60%)] group-hover:opacity-100"
                    />
                    <div className="absolute inset-0 flex items-end justify-center p-2">
                      <Scene brand={brand} className="h-full w-full" />
                    </div>
                    <span
                      style={display}
                      className="absolute left-3 top-3 inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[10px] tracking-[0.18em] text-black/55"
                    >
                      <span className="text-[var(--brand)]">0{i + 1}</span>
                      <span className="text-black/30">/</span>
                      <span>04</span>
                    </span>
                  </div>

                  <div className="flex flex-1 flex-col px-2 pt-4 pb-2">
                    <p className="text-base font-semibold text-neutral-950">{title}</p>
                    <p className="mt-1 text-sm leading-6 text-black/55">{description}</p>
                  </div>
                </li>
              );
            })}
          </ul>

          <div className="mt-12 flex items-center justify-center">
            <div
              style={display}
              className="inline-flex items-center gap-2 rounded-full bg-white/80 px-3 py-1.5 text-[11px] tracking-[0.22em] text-[color-mix(in_oklab,var(--brand)_85%,transparent)] ring-1 ring-[color-mix(in_oklab,var(--brand)_20%,transparent)] backdrop-blur"
            >
              <motion.span
                aria-hidden
                animate={reduce ? undefined : { rotate: 360 }}
                transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
                className="inline-block"
              >
                ↻
              </motion.span>
              RUNS CONTINUOUSLY
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}