"use client";

import { type HTMLMotionProps, motion, useInView, useReducedMotion, type Variants } from "motion/react";
import * as React from "react";
import { cn } from "@/lib/utils";

// ---------------------------------------------------------------------------
// Animation variants (matching hero-vite vocabulary)
// ---------------------------------------------------------------------------

const containerVariants: Variants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.08,
      delayChildren: 0.1,
    },
  },
};

const wordVariants: Variants = {
  hidden: {
    opacity: 0,
    y: 20,
    filter: "blur(8px)",
  },
  visible: {
    opacity: 1,
    y: 0,
    filter: "blur(0px)",
    transition: {
      duration: 0.5,
      ease: [0.25, 0.4, 0.25, 1],
    },
  },
};

const cardVariants: Variants = {
  hidden: { opacity: 0, y: 24 },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      type: "spring",
      stiffness: 260,
      damping: 24,
    },
  },
};

// ---------------------------------------------------------------------------
// Animated text helpers
// ---------------------------------------------------------------------------

function AnimatedWords({ children, className }: { children: string; className?: string }) {
  const ref = React.useRef<HTMLSpanElement>(null);
  const isInView = useInView(ref, { once: true, margin: "-80px" });
  const words = children.split(" ");

  return (
    <motion.span
      animate={isInView ? "visible" : "hidden"}
      className={cn("inline-flex flex-wrap", className)}
      initial="hidden"
      ref={ref}
      variants={containerVariants}
    >
      {words.map((word, index) => (
        <motion.span className="mr-[0.25em] inline-block" key={index} variants={wordVariants}>
          {word}
        </motion.span>
      ))}
    </motion.span>
  );
}

// ---------------------------------------------------------------------------
// Check icon (for completed milestones)
// ---------------------------------------------------------------------------

function CheckIcon({ className, ...props }: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      className={className}
      fill="none"
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth={3}
      viewBox="0 0 24 24"
      {...props}
    >
      <polyline points="20 6 9 17 4 12" />
    </svg>
  );
}

// ---------------------------------------------------------------------------
// Types
// ---------------------------------------------------------------------------

export interface RoadmapViteMilestone {
  title: string;
  description: string;
  date: string;
  status: "completed" | "current" | "upcoming";
}

export interface RoadmapViteRootProps extends Omit<React.ComponentPropsWithoutRef<"section">, "title"> {
  srTitle?: string;
  title?: React.ReactNode;
  subtitle?: React.ReactNode;
  description?: React.ReactNode;
  milestones?: RoadmapViteMilestone[];
}

// ---------------------------------------------------------------------------
// Context
// ---------------------------------------------------------------------------

interface RoadmapViteContextValue {
  srTitle: string;
  title: React.ReactNode;
  subtitle: React.ReactNode;
  description: React.ReactNode;
  milestones: RoadmapViteMilestone[];
}

const RoadmapViteContext = React.createContext<RoadmapViteContextValue | undefined>(undefined);

function useRoadmapViteContext() {
  const ctx = React.useContext(RoadmapViteContext);
  if (!ctx) {
    throw new Error("RoadmapVite components must be used within RoadmapViteRoot");
  }
  return ctx;
}

export function useRoadmapVite() {
  return useRoadmapViteContext();
}

// ---------------------------------------------------------------------------
// Default data
// ---------------------------------------------------------------------------

const VITE_COLORS = ["#ed40b3", "#6ef7cc", "#adfa1e", "#b054de"] as const;

const defaultMilestones: RoadmapViteMilestone[] = [
  {
    title: "Beta Launch",
    description: "Initial release with core component library, documentation site, and CLI scaffolding tool.",
    date: "Q1 2025",
    status: "completed",
  },
  {
    title: "Public Release",
    description:
      "Production-ready v1.0 with full API stability guarantees, migration guides, and enterprise support tiers.",
    date: "Q2 2025",
    status: "completed",
  },
  {
    title: "Enterprise Features",
    description: "SSO, audit logging, custom theming engine, and dedicated SLA for enterprise customers.",
    date: "Q3 2025",
    status: "current",
  },
  {
    title: "API v2",
    description:
      "Next-generation composable API with tree-shakeable exports, server component support, and zero-config setup.",
    date: "Q4 2025",
    status: "upcoming",
  },
  {
    title: "Mobile SDK",
    description:
      "React Native component library with shared design tokens, gesture-driven animations, and offline-first sync.",
    date: "Q1 2026",
    status: "upcoming",
  },
  {
    title: "AI Integration",
    description:
      "Natural language component generation, intelligent theming, and automated accessibility audits powered by LLMs.",
    date: "Q2 2026",
    status: "upcoming",
  },
];

// ---------------------------------------------------------------------------
// Root
// ---------------------------------------------------------------------------

export const RoadmapViteRoot = React.forwardRef<HTMLElement, RoadmapViteRootProps>(
  (
    {
      className,
      children,
      srTitle = "Product roadmap",
      title = "Where we're headed",
      subtitle = "and what's next",
      description = "A transparent look at our product timeline — what we've shipped, what we're building, and where we're going.",
      milestones = defaultMilestones,
      ...props
    },
    ref
  ) => {
    const contextValue = React.useMemo<RoadmapViteContextValue>(
      () => ({ srTitle, title, subtitle, description, milestones }),
      [srTitle, title, subtitle, description, milestones]
    );

    return (
      <RoadmapViteContext.Provider value={contextValue}>
        <section
          className={cn("relative w-full overflow-hidden antialiased", className)}
          data-slot="roadmap-vite-root"
          ref={ref}
          {...props}
        >
          <h2 className="sr-only">{srTitle}</h2>
          {children}
        </section>
      </RoadmapViteContext.Provider>
    );
  }
);
RoadmapViteRoot.displayName = "RoadmapViteRoot";

// ---------------------------------------------------------------------------
// Container
// ---------------------------------------------------------------------------

export function RoadmapViteContainer({ className, ...props }: React.ComponentPropsWithoutRef<"div">) {
  return (
    <div
      className={cn(
        "container relative z-10 flex flex-col gap-12 py-16 sm:gap-16 sm:py-20 lg:gap-20 lg:py-28",
        className
      )}
      data-slot="roadmap-vite-container"
      {...props}
    />
  );
}

// ---------------------------------------------------------------------------
// Heading
// ---------------------------------------------------------------------------

export interface RoadmapViteHeadingProps extends Omit<React.ComponentPropsWithoutRef<"div">, "title"> {
  title?: React.ReactNode;
  subtitle?: React.ReactNode;
  headingClassName?: string;
}

export function RoadmapViteHeading({
  className,
  title,
  subtitle,
  headingClassName,
  children,
  ...props
}: RoadmapViteHeadingProps) {
  const context = useRoadmapViteContext();
  const resolvedTitle = title ?? context.title;
  const resolvedSubtitle = subtitle ?? context.subtitle;

  return (
    <div className={cn("text-center", className)} data-slot="roadmap-vite-heading-wrap" {...props}>
      {children ?? (
        <div
          aria-hidden="true"
          className={cn(
            "text-balance font-medium text-3xl tracking-[-0.04em] sm:text-4xl md:text-5xl lg:tracking-[-0.06em] xl:text-6xl",
            headingClassName
          )}
          data-slot="roadmap-vite-heading"
        >
          {typeof resolvedTitle === "string" ? <AnimatedWords>{resolvedTitle}</AnimatedWords> : resolvedTitle}
          <br className="hidden sm:block" />
          {resolvedSubtitle && (
            <span className="text-foreground/50">
              {" "}
              {typeof resolvedSubtitle === "string" ? (
                <AnimatedWords>{resolvedSubtitle}</AnimatedWords>
              ) : (
                resolvedSubtitle
              )}
            </span>
          )}
        </div>
      )}
    </div>
  );
}

// ---------------------------------------------------------------------------
// Description
// ---------------------------------------------------------------------------

export interface RoadmapViteDescriptionProps extends HTMLMotionProps<"div"> {
  description?: React.ReactNode;
  descriptionClassName?: string;
}

export function RoadmapViteDescription({
  className,
  description,
  descriptionClassName,
  children,
  ...props
}: RoadmapViteDescriptionProps) {
  const context = useRoadmapViteContext();
  const resolvedDescription = description ?? context.description;
  const ref = React.useRef<HTMLDivElement>(null);
  const isInView = useInView(ref, { once: true, margin: "-60px" });

  return (
    <motion.div
      animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 16 }}
      className={cn("mx-auto max-w-2xl text-center", className)}
      data-slot="roadmap-vite-description-wrap"
      initial={{ opacity: 0, y: 16 }}
      ref={ref}
      transition={{ duration: 0.6, delay: 0.3, ease: [0.25, 0.4, 0.25, 1] }}
      {...props}
    >
      {children ?? (
        <p
          className={cn("text-pretty text-base text-foreground/60 sm:text-lg", descriptionClassName)}
          data-slot="roadmap-vite-description"
        >
          {resolvedDescription}
        </p>
      )}
    </motion.div>
  );
}

// ---------------------------------------------------------------------------
// Timeline
// ---------------------------------------------------------------------------

export interface RoadmapViteTimelineProps extends React.ComponentPropsWithoutRef<"div"> {
  milestones?: RoadmapViteMilestone[];
}

export function RoadmapViteTimeline({ className, milestones, children, ...props }: RoadmapViteTimelineProps) {
  const context = useRoadmapViteContext();
  const resolvedMilestones = milestones ?? context.milestones;
  const ref = React.useRef<HTMLDivElement>(null);
  const isInView = useInView(ref, { once: true, margin: "-100px" });
  const shouldReduceMotion = useReducedMotion();

  return (
    <div className={cn("relative mx-auto max-w-4xl", className)} data-slot="roadmap-vite-timeline" ref={ref} {...props}>
      {/* Structural timeline rail (neutral — color lives on nodes, not the spine) */}
      <motion.div
        animate={isInView ? { scaleY: 1, transformOrigin: "top" } : { scaleY: 0, transformOrigin: "top" }}
        className="md:-translate-x-px pointer-events-none absolute top-0 bottom-0 left-4 w-px bg-border md:left-1/2"
        initial={{ scaleY: 0, transformOrigin: "top" }}
        transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.65, ease: [0.25, 0.4, 0.25, 1] }}
      />

      <div className="relative flex flex-col gap-8 md:gap-12">
        {children ??
          resolvedMilestones.map((milestone, index) => (
            <RoadmapViteMilestoneRow index={index} key={milestone.title} milestone={milestone} />
          ))}
      </div>
    </div>
  );
}

// ---------------------------------------------------------------------------
// Milestone row (node + card)
// ---------------------------------------------------------------------------

interface RoadmapViteMilestoneRowProps {
  milestone: RoadmapViteMilestone;
  index: number;
}

function RoadmapViteMilestoneRow({ milestone, index }: RoadmapViteMilestoneRowProps) {
  const isLeft = index % 2 === 0;
  const ref = React.useRef<HTMLDivElement>(null);
  const isInView = useInView(ref, { once: true, margin: "-60px" });

  return (
    <motion.div
      animate={isInView ? "visible" : "hidden"}
      className={cn(
        "relative grid items-center gap-4",
        "grid-cols-[auto_1fr] pl-0",
        "md:grid-cols-[1fr_auto_1fr] md:gap-8 md:pl-0"
      )}
      initial="hidden"
      ref={ref}
      variants={cardVariants}
    >
      {/* Desktop left card or spacer */}
      <div className={cn("hidden md:block", isLeft ? "text-right" : "order-3")}>
        {isLeft ? <RoadmapViteCard alignment="right" milestone={milestone} /> : <div />}
      </div>

      {/* Node */}
      <div className="relative z-10 flex items-center justify-center md:order-2">
        <RoadmapViteNode status={milestone.status} />
      </div>

      {/* Desktop right card or spacer */}
      <div className={cn("hidden md:block", isLeft ? "order-3" : "")}>
        {isLeft ? <div /> : <RoadmapViteCard alignment="left" milestone={milestone} />}
      </div>

      {/* Mobile card (always right of the node) */}
      <div className="md:hidden">
        <RoadmapViteCard alignment="left" milestone={milestone} />
      </div>
    </motion.div>
  );
}

// ---------------------------------------------------------------------------
// Node
// ---------------------------------------------------------------------------

export interface RoadmapViteNodeProps {
  status: RoadmapViteMilestone["status"];
}

export function RoadmapViteNode({ status }: RoadmapViteNodeProps) {
  const shouldReduceMotion = useReducedMotion();

  const nodeStyles = {
    completed: {
      bg: VITE_COLORS[1],
      glow: "0 0 0 6px rgba(110,247,204,0.12)",
    },
    current: {
      bg: VITE_COLORS[0],
      glow: "0 0 0 6px rgba(237,64,179,0.15)",
    },
    upcoming: {
      bg: undefined,
      glow: "none",
    },
  };

  const s = nodeStyles[status];

  return (
    <div className="relative flex items-center justify-center">
      <motion.div
        animate={status === "current" && !shouldReduceMotion ? { scale: [1, 1.06, 1] } : undefined}
        className={cn(
          "relative flex size-8 items-center justify-center rounded-full",
          status === "upcoming" && "bg-muted-foreground/20"
        )}
        style={{
          backgroundColor: s.bg,
          boxShadow: s.glow,
        }}
        transition={
          status === "current"
            ? { repeat: Number.POSITIVE_INFINITY, duration: 2.4, ease: [0.45, 0, 0.55, 1] }
            : undefined
        }
      >
        {status === "completed" && <CheckIcon className="size-4 text-black/80" />}
        {status === "current" && <div className="size-2 rounded-full bg-white" />}
      </motion.div>
    </div>
  );
}

// ---------------------------------------------------------------------------
// Card
// ---------------------------------------------------------------------------

export interface RoadmapViteCardProps extends HTMLMotionProps<"div"> {
  milestone: RoadmapViteMilestone;
  alignment?: "left" | "right";
}

export function RoadmapViteCard({ className, milestone, alignment = "left", ...props }: RoadmapViteCardProps) {
  return (
    <motion.div
      className={cn(
        "relative flex flex-col gap-2 rounded-2xl bg-card p-5 transition-shadow duration-200 sm:gap-2.5 sm:p-6",
        "shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_2px_4px_-1px_rgba(0,0,0,0.08),0px_8px_24px_-4px_rgba(0,0,0,0.08)]",
        "dark:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.06),0px_2px_4px_-1px_rgba(255,255,255,0.04),0px_8px_24px_-4px_rgba(0,0,0,0.35)]",
        "hover:shadow-[0px_0px_0px_1px_rgba(0,0,0,0.08),0px_4px_6px_-1px_rgba(0,0,0,0.1),0px_12px_32px_-4px_rgba(0,0,0,0.1)]",
        "dark:hover:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.1),0px_4px_6px_-1px_rgba(255,255,255,0.05),0px_12px_32px_-4px_rgba(0,0,0,0.45)]",
        milestone.status === "upcoming" && "opacity-[0.72]",
        alignment === "right" && "md:text-right",
        className
      )}
      data-slot="roadmap-vite-card"
      {...props}
    >
      <span className="font-mono text-[10px] text-muted-foreground uppercase tracking-[0.16em] sm:text-xs sm:tracking-[0.2em]">
        {milestone.date}
      </span>

      <h3 className="font-semibold text-base text-foreground tracking-tight sm:text-lg">{milestone.title}</h3>

      <p className="text-pretty text-muted-foreground text-sm leading-relaxed">{milestone.description}</p>

      {milestone.status === "current" && (
        <span
          className="mt-1 inline-flex w-fit items-center gap-1.5 rounded-full px-2.5 py-0.5 font-mono text-[10px] uppercase tracking-[0.15em]"
          style={{
            backgroundColor: `${VITE_COLORS[0]}15`,
            color: VITE_COLORS[0],
          }}
        >
          <span className="size-1.5 rounded-full" style={{ backgroundColor: VITE_COLORS[0] }} />
          In progress
        </span>
      )}
    </motion.div>
  );
}

// ---------------------------------------------------------------------------
// Composed shorthand
// ---------------------------------------------------------------------------

export interface RoadmapViteProps extends RoadmapViteRootProps {
  containerClassName?: string;
  headingWrapClassName?: string;
  headingClassName?: string;
  descriptionWrapClassName?: string;
  descriptionClassName?: string;
  timelineClassName?: string;
}

export function RoadmapVite({
  containerClassName,
  headingWrapClassName,
  headingClassName,
  descriptionWrapClassName,
  descriptionClassName,
  timelineClassName,
  ...props
}: RoadmapViteProps) {
  return (
    <RoadmapViteRoot {...props}>
      <RoadmapViteContainer className={containerClassName}>
        <RoadmapViteHeading className={headingWrapClassName} headingClassName={headingClassName} />
        <RoadmapViteDescription className={descriptionWrapClassName} descriptionClassName={descriptionClassName} />
        <RoadmapViteTimeline className={timelineClassName} />
      </RoadmapViteContainer>
    </RoadmapViteRoot>
  );
}

export default RoadmapVite;
Download Block

Add UI Components

Alternative Options

Download Block

Add UI Components

Alternative Options
