Process Autoplay

npx shadcn@latest add https://framebrick.co/r/step-sequence.json https://framebrick.co/r/flip-button.json

npx shadcn@latest add https://framebrick.co/r/blocks/tokens.json

"use client";

import { FlipButton } from "@/components/ui/flip-button";
import { StepSequence } from "@/components/ui/step-sequence";
import { cn } from "@/lib/utils";

/*
 * Process Autoplay — a heading, then steps that take turns every few seconds beside a photo that cross-fades to the
 * active step, and an action.
 * Source: marcframe/findit → components/sections/AboutProcessSection.tsx (+ design-system ProcessStep).
 *
 * Layout kept from Framer: below 1024px the steps sit above the photo (256px tall, 320px from 640px); from 1024px the
 * steps take 40% of the row and the photo fills the rest at their height (at least 512px here — Framer's 644px text
 * column included the heading).
 * Motion kept (step-sequence): one step is active and the others sit at 70% (Framer: 50%); every 5s the next one takes over (after
 * the last, the first); choosing a step makes it active at once; opacity and the photo cross-fade use a spring
 * (bounce 0, 0.4s). step-sequence's improvements over Framer apply: a real tab list with arrow keys, the rotation
 * pauses while hovered or focused, and it doesn't rotate with reduced motion.
 * Changed: the heading spans the row above the steps and the photo, and the button follows them — Framer keeps both in
 * the steps' column. The button rolls its label (flip-button). Dropped: Findit's dotted, uppercase label.
 */

export type AutoplayStep = { title: string; text: string; image: { src: string; alt: string } };

export type ProcessAutoplayProps = {
  /** Small line above the heading. */
  label?: string;
  title?: string;
  lead?: string;
  steps?: AutoplayStep[];
  /** Milliseconds each step stays active; 0 turns the rotation off. */
  interval?: number;
  action?: { label: string; href: string };
  className?: string;
};

const photo = (id: string) => `https://images.unsplash.com/${id}?auto=format&fit=crop&w=1400&q=80`;

const defaults = {
  label: "How we work",
  title: "From first call to moving day",
  lead: "Three steps, one team, no surprises along the way.",
  steps: [
    {
      title: "Discover",
      text: "We learn what you need and shortlist homes that fit your budget and your life.",
      image: { src: photo("photo-1502672260266-1c1ef2d93688"), alt: "Living room with plants and a grey sofa" },
    },
    {
      title: "Experience",
      text: "Visit in person or by video with an agent who knows the building and the street.",
      image: { src: photo("photo-1560448204-e02f11c3d0e2"), alt: "Bright living room with tall windows" },
    },
    {
      title: "Secure",
      text: "We negotiate, handle the paperwork and stay with you until the keys are yours.",
      image: { src: photo("photo-1493809842364-78817add7ffb"), alt: "Living room with a blue sofa and white shelves" },
    },
  ] as AutoplayStep[],
  action: { label: "Start your journey", href: "/properties" },
};

export function ProcessAutoplay({
  label = defaults.label,
  title = defaults.title,
  lead = defaults.lead,
  steps = defaults.steps,
  interval = 5000,
  action = defaults.action,
  className,
}: ProcessAutoplayProps) {
  return (
    <section className={cn("py-(--section-y)", className)}>
      <div className="mx-auto flex max-w-(--container) flex-col items-start gap-12 px-(--gutter)">
        <div className="flex flex-col gap-5">
          <div className="flex flex-col gap-2.5">
            {label && <p className="text-sm font-medium text-muted-foreground">{label}</p>}
            <h2 className="font-heading text-h2 font-semibold tracking-tight text-balance">{title}</h2>
          </div>
          {lead && <p className="max-w-xl text-pretty text-muted-foreground">{lead}</p>}
        </div>
        <StepSequence
          label={title}
          interval={interval}
          className="lg:min-h-128"
          steps={steps.map((step) => ({
            value: step.title,
            title: step.title,
            description: step.text,
            media: <img src={step.image.src} alt={step.image.alt} />,
          }))}
        />
        {action && <FlipButton href={action.href}>{action.label}</FlipButton>}
      </div>
    </section>
  );
}