Steps

/**
 * VibeBox Motion · Steps
 * 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 type { CSSProperties } from "react";
import { Container, headingId, REVEAL, Section, SectionHead, SlotText, type BlockProps } from "@/lib/vibebox/block-kit";
import { cn } from "@/lib/utils";
import type { Content, Variant } from "./schema";

/*
 * Three to five steps from first contact to done: a numbered row joined by a hairline, or a
 * vertical timeline beside the heading. Steps reveal one after another as they scroll in.
 */

/* The journey: a track that fills with the brand colour as the steps scroll through, each number
   lighting as the fill reaches it (CSS scroll-driven, a named view timeline on the list). Down the
   left on phones, across on wide screens. Complete and lit without scroll timelines or with motion
   off. */
const JOURNEY_STYLES = `
[data-vb="how-it-works-steps"] [data-vb-journey] { view-timeline: --vb-journey block; }
[data-vb="how-it-works-steps"] [data-vb-journey-fill] { transform-origin: 0 0; }
[data-vb="how-it-works-steps"] [data-vb-journey-on] { opacity: 1; }
@keyframes vb-journey-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes vb-journey-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes vb-journey-on { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    :root:not([data-motion="0"]) [data-vb="how-it-works-steps"] [data-vb-journey-fill] { animation: vb-journey-y linear both; animation-timeline: --vb-journey; animation-range: cover 18% cover 58%; }
    :root:not([data-motion="0"]) [data-vb="how-it-works-steps"] [data-vb-journey-on] {
      animation: vb-journey-on linear both; animation-timeline: --vb-journey;
      animation-range: cover calc(18% + 40% * var(--i) / var(--vb-last)) cover calc(22% + 40% * var(--i) / var(--vb-last));
    }
  }
}
@media (min-width: 64rem) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    :root:not([data-motion="0"]) [data-vb="how-it-works-steps"] [data-vb-journey-fill] { animation-name: vb-journey-x; }
  }
}
`;

export type HowItWorksStepsProps = BlockProps<Content, Variant>;

export function HowItWorksSteps({ content, variant = "row", id, tone, className }: HowItWorksStepsProps) {
  const timeline = variant === "timeline";
  if (variant === "journey") return <Journey content={content} id={id} tone={tone} className={className} />;
  return (
    <Section slug="how-it-works-steps" variant={variant} id={id} tone={tone} labelledBy={headingId(id)} className={className}>
      <Container className={cn("grid gap-[clamp(32px,4vw,56px)]", timeline && "lg:grid-cols-[minmax(0,0.85fr)_minmax(0,1.15fr)] lg:gap-20")}>
        <SectionHead eyebrow={content.eyebrow} heading={content.heading} lead={content.lead} id={id} className={cn(timeline && "lg:sticky lg:top-24 lg:self-start")} />
        {timeline ? (
          <ol className="relative grid gap-10 before:absolute before:top-2 before:bottom-2 before:left-[19px] before:w-px before:bg-border-strong">
            {content.steps.map((step, index) => (
              <li key={index} className={cn("relative grid grid-cols-[40px_minmax(0,1fr)] gap-x-5 gap-y-2", REVEAL)}>
                <span
                  aria-hidden="true"
                  className="row-span-2 inline-grid size-10 place-items-center rounded-full bg-background font-mono text-small font-semibold ring-1 ring-border-strong"
                >
                  {index + 1}
                </span>
                <SlotText as="h3" value={step.title} path={`steps.${index}.title`} className="pt-1.5 text-h3 font-semibold tracking-tight" />
                <SlotText as="p" value={step.body} path={`steps.${index}.body`} className="max-w-[52ch] text-pretty text-muted-foreground" />
              </li>
            ))}
          </ol>
        ) : (
          <ol
            className="grid gap-8 sm:grid-cols-2 lg:grid-cols-[repeat(var(--vb-steps),minmax(0,1fr))] lg:gap-6"
            style={{ "--vb-steps": content.steps.length } as CSSProperties}
          >
            {content.steps.map((step, index) => (
              <li key={index} className={cn("relative grid content-start gap-3", REVEAL)}>
                <div className="flex items-center gap-3">
                  <span aria-hidden="true" className="inline-grid size-10 shrink-0 place-items-center rounded-full bg-primary font-mono text-small font-semibold text-primary-foreground">
                    {index + 1}
                  </span>
                  {index < content.steps.length - 1 && <span aria-hidden="true" className="hidden h-px flex-1 bg-[linear-gradient(90deg,var(--border-strong),transparent)] lg:block" />}
                </div>
                <SlotText as="h3" value={step.title} path={`steps.${index}.title`} className="text-h3 font-semibold tracking-tight" />
                <SlotText as="p" value={step.body} path={`steps.${index}.body`} className="text-pretty text-muted-foreground" />
              </li>
            ))}
          </ol>
        )}
      </Container>
    </Section>
  );
}

function Journey({ content, id, tone, className }: Omit<HowItWorksStepsProps, "variant">) {
  const count = content.steps.length;
  return (
    <Section slug="how-it-works-steps" variant="journey" id={id} tone={tone} labelledBy={headingId(id)} className={className}>
      <style href="vb-how-it-works-journey" precedence="vb">
        {JOURNEY_STYLES}
      </style>
      <Container className="grid gap-[clamp(32px,4vw,56px)]">
        <SectionHead eyebrow={content.eyebrow} heading={content.heading} lead={content.lead} id={id} />
        <div data-vb-journey="" className="relative" style={{ "--vb-steps": count, "--vb-last": Math.max(1, count - 1) } as CSSProperties}>
          <div aria-hidden="true" className="absolute top-[27px] bottom-[27px] left-[26px] w-0.5 overflow-hidden rounded-full bg-border lg:top-[26px] lg:right-[27px] lg:bottom-auto lg:left-[27px] lg:h-0.5 lg:w-auto">
            <div data-vb-journey-fill="" className="size-full bg-primary" />
          </div>
          <ol className="relative grid gap-[34px] lg:grid-cols-[repeat(var(--vb-steps),minmax(0,1fr))] lg:gap-[clamp(24px,4vw,56px)]">
            {content.steps.map((step, index) => (
              <li key={index} className="relative grid content-start gap-2.5 pl-[78px] lg:pt-[78px] lg:pl-0">
                <span
                  aria-hidden="true"
                  className="absolute top-[-4px] left-0 grid size-[54px] place-items-center overflow-hidden rounded-full bg-background font-serif text-[1.35rem] text-foreground italic ring-[1.5px] ring-border-strong ring-inset lg:top-0"
                >
                  {index + 1}
                  {/* Lit: the contrast-checked primary pair, with its own copy of the number. */}
                  <span data-vb-journey-on="" className="absolute inset-0 grid place-items-center rounded-full bg-primary text-primary-foreground" style={{ "--i": index } as CSSProperties}>
                    {index + 1}
                  </span>
                </span>
                <SlotText as="h3" value={step.title} path={`steps.${index}.title`} className="text-h3 font-semibold tracking-tight" />
                <SlotText as="p" value={step.body} path={`steps.${index}.body`} className="max-w-[34ch] text-pretty text-muted-foreground" />
              </li>
            ))}
          </ol>
        </div>
      </Container>
    </Section>
  );
}

/**
 * VibeBox Motion · Steps
 * 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 = ["row", "timeline", "journey"] as const;

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

export const content = sections["how-it-works"];

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