Zigzag Services

/**
 * VibeBox Motion · Zigzag Services
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
import { Container, headingId, Icon, Media, REVEAL, Section, SectionHead, SlotText, TextLink, type BlockProps } from "@/lib/vibebox/block-kit";
import type { Image, SceneName } from "@/lib/vibebox/content";
import { cn } from "@/lib/utils";
import type { Content, Variant } from "./schema";

/*
 * One row per service, image and copy alternating sides, for services that deserve a photo each.
 * Missing photos become placeholder scenes, each in a different arrangement of the palette.
 */

const SCENES: SceneName[] = ["arches", "waves", "blocks", "orbit", "petals", "horizon"];
const pad = (n: number) => String(n).padStart(2, "0");

export type ServicesZigzagProps = BlockProps<Content, Variant>;

export function ServicesZigzag({ content, variant = "media-first", id, tone, className }: ServicesZigzagProps) {
  return (
    <Section slug="services-zigzag" variant={variant} id={id} tone={tone} labelledBy={headingId(id)} className={className}>
      <Container className="grid gap-[clamp(40px,5vw,72px)]">
        <SectionHead eyebrow={content.eyebrow} heading={content.heading} lead={content.lead} id={id} />
        <ol className="grid gap-[clamp(40px,6vw,88px)]">
          {content.items.map((item, index) => {
            const flip = (index % 2 === 1) !== (variant === "copy-first");
            const fallback: Image = { src: `scene:${SCENES[index % SCENES.length]}:${index}`, alt: "", width: 1200, height: 900 };
            return (
              <li key={index} className="grid grid-cols-[minmax(0,1fr)] items-center gap-6 md:grid-cols-2 md:gap-[clamp(32px,5vw,72px)]">
                <div className={cn("aspect-[4/3] overflow-hidden rounded-xl ring-1 ring-border", flip && "md:order-2", REVEAL)}>
                  <Media image={item.media ?? fallback} sizes="(min-width: 768px) 50vw, 100vw" />
                </div>
                <div className={cn("grid content-center gap-4", REVEAL)}>
                  <span className="flex items-center gap-3">
                    {item.icon && (
                      <span className="inline-grid size-10 place-items-center rounded-md border border-border bg-card">
                        <Icon name={item.icon} />
                      </span>
                    )}
                    <span aria-hidden="true" className="font-mono text-small font-medium text-muted-foreground tabular-nums">
                      {pad(index + 1)}
                    </span>
                  </span>
                  <SlotText as="h3" value={item.title} path={`items.${index}.title`} className="font-display text-[clamp(1.6rem,1.1rem+1.6vw,2.6rem)] leading-tight font-semibold tracking-[-0.025em] text-balance" />
                  <SlotText as="p" value={item.body} path={`items.${index}.body`} className="max-w-[46ch] text-pretty text-muted-foreground" />
                  {content.action && index === 0 && <TextLink link={content.action} path="action" className="mt-1 justify-self-start" />}
                </div>
              </li>
            );
          })}
        </ol>
      </Container>
    </Section>
  );
}

/**
 * VibeBox Motion · Zigzag Services
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
import { sections, type z } from "@/lib/vibebox/content";

export const variants = ["media-first", "copy-first"] as const;

export type Variant = (typeof variants)[number];

export const content = sections.services;

export type Content = z.infer<typeof content>;