Release Pill: Launch Week

"use client";

import * as React from "react";

import { ReleasePill, type Release } from "@/components/ui/release-pill";

const releases: Release[] = [
  {
    version: "Day 3",
    title: "Usage-based pricing",
    date: "Wed",
    href: "#day-3",
    summary: "Pay for the runs you make. Nothing else, no seats.",
  },
  { version: "Day 2", title: "Slack approvals", date: "Tue", href: "#day-2" },
  { version: "Day 1", title: "Agents 2.0", date: "Mon", href: "#day-1" },
];

// Day 4 unlocks 14h 32m after the demo loads.
const UNLOCK_SECONDS = 14 * 3600 + 32 * 60;

function Countdown() {
  const [left, setLeft] = React.useState(UNLOCK_SECONDS);
  React.useEffect(() => {
    const timer = window.setInterval(() => setLeft((s) => Math.max(0, s - 1)), 1000);
    return () => window.clearInterval(timer);
  }, []);
  const minutes = Math.ceil(left / 60);
  return (
    <span className="tabular-nums">
      in {Math.floor(minutes / 60)}h {String(minutes % 60).padStart(2, "0")}m
    </span>
  );
}

function LockedDay() {
  return (
    <div aria-disabled="true" className="flex items-center gap-3 text-muted-foreground opacity-60 select-none">
      <svg
        aria-hidden
        viewBox="0 0 16 16"
        className="size-3.5 shrink-0"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      >
        <rect x="3" y="7" width="10" height="7" rx="2" />
        <path d="M5.5 7V5a2.5 2.5 0 0 1 5 0v2" />
      </svg>
      <span className="sr-only">Locked.</span>
      <span className="font-medium">Day 4 · Tomorrow</span>
      <span className="ml-auto text-xs">
        <Countdown />
      </span>
    </div>
  );
}

export function ReleasePillLaunchDemo() {
  return (
    <section className="relative flex w-full max-w-3xl flex-col items-center px-6 py-16 text-center text-foreground sm:py-24">
      <ReleasePill
        releases={releases}
        tag="Launch week"
        changelogHref="#launch-week"
        cycle
      >
        <LockedDay />
      </ReleasePill>

      <h2 className="mt-7 max-w-[14ch] text-4xl/[1.05] font-semibold tracking-tight text-balance sm:text-6xl/[1.03]">
        One new thing, every morning
      </h2>
      <p className="mt-5 max-w-md text-base/7 text-pretty text-muted-foreground">
        Launch week is here. Three days in, three things shipped, and the best one is still to
        come.
      </p>

      <a
        href="#remind"
        className="mt-9 inline-flex h-11 items-center rounded-full bg-foreground px-6 text-sm font-medium text-background outline-none hover:opacity-90 focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
      >
        Remind me tomorrow
      </a>
    </section>
  );
}