import Image from "next/image";
import { Reveal } from "../ui/Reveal";
import type { Pillar } from "@/lib/games";

type Props = { pillars: Pillar[] };

/**
 * What the player does — one band per pillar, image and copy swapping sides.
 *
 * This is the block the game page was missing: it had a status, a fact sheet
 * and a gallery, but nowhere did it say what you actually *do*. Modelled on
 * the EmberWild site's pillar bands: one word, one sentence, one capture. The
 * screenshot carries the selling, so the copy never repeats what it shows.
 */
export function GamePillars({ pillars }: Props) {
  if (pillars.length === 0) return null;

  return (
    <div className="border-t border-border">
      {pillars.map((pillar, index) => {
        const flipped = index % 2 === 1;

        return (
          <section
            key={pillar.title}
            className="mx-auto grid max-w-6xl items-center gap-8 px-6 py-14 sm:py-20 lg:grid-cols-2 lg:gap-16 lg:px-10"
          >
            {/* The capture enters from the side it sits on, so a run of
                pillars reads as a zig-zag rather than as four identical
                fade-ups. */}
            <Reveal
              direction={flipped ? "right" : "left"}
              className={flipped ? "lg:order-2" : undefined}
            >
              <div className="relative aspect-video w-full overflow-hidden rounded-2xl border border-border bg-surface-elevated">
                <Image
                  src={pillar.shot}
                  alt=""
                  fill
                  sizes="(max-width: 1024px) 100vw, 50vw"
                  className="object-cover"
                />
              </div>
            </Reveal>

            <Reveal
              delay={0.1}
              className={flipped ? "lg:order-1" : undefined}
            >
              <h3 className="font-display text-[clamp(2rem,1.4rem+2.2vw,3.25rem)] uppercase leading-none tracking-wider">
                {pillar.title}
              </h3>
              <p className="mt-5 max-w-md text-lg leading-relaxed text-foreground-muted">
                {pillar.body}
              </p>
            </Reveal>
          </section>
        );
      })}
    </div>
  );
}