Lodestone: Two Paths

"use client";

import * as React from "react";

import { Lodestone, LodestoneQuiet, LodestoneTarget } from "@/components/ui/lodestone";

type Path = "build" | "sales";

export function LodestonePathsDemo() {
  // The field rests on the primary path and follows whichever one the visitor leans toward.
  const [leaning, setLeaning] = React.useState<Path | null>(null);
  const active = leaning ?? "build";

  const lean = (path: Path) => ({
    strength: active === path ? 1 : 0.12,
    onPointerEnter: () => setLeaning(path),
    onPointerLeave: () => setLeaning(null),
    onFocus: () => setLeaning(path),
    onBlur: () => setLeaning(null),
  });

  return (
    <Lodestone
      cursor={0.6}
      className="flex h-[var(--demo-height,32rem)] w-full flex-col items-center justify-center rounded-2xl border border-border bg-background px-6 text-center text-foreground"
    >
      <LodestoneQuiet className="flex flex-col items-center">
        <h2 className="max-w-[16ch] text-4xl/[1.05] font-semibold tracking-tight text-balance sm:text-5xl/[1.03]">
          Your first agent ships this afternoon
        </h2>
        <p className="mt-4 max-w-sm text-base/7 text-pretty text-muted-foreground">
          Start from a template on your own, or walk through your stack with an engineer.
        </p>
      </LodestoneQuiet>

      <div className="mt-10 flex flex-wrap items-center justify-center gap-3">
        <LodestoneTarget {...lean("build")}>
          <a
            href="#start"
            className="inline-flex h-11 items-center rounded-full bg-foreground px-6 text-sm font-medium text-background"
          >
            Start building free
          </a>
        </LodestoneTarget>
        <LodestoneTarget {...lean("sales")}>
          <a
            href="#sales"
            className="inline-flex h-11 items-center rounded-full border border-border bg-background px-6 text-sm font-medium transition-colors hover:bg-muted"
          >
            Talk to an engineer
          </a>
        </LodestoneTarget>
      </div>
    </Lodestone>
  );
}