Hero Terminal

"use client";

import { useEffect, useState } from "react";
import { useReducedMotion } from "motion/react";
import { cn } from "@/lib/utils";

export interface HeroTerminalLine {
  kind: "cmd" | "out" | "ok";
  text: string;
}

export interface HeroTerminalProps {
  kicker?: string;
  title?: string;
  description?: string;
  primaryCta?: { label: string; href: string };
  install?: string;
  lines?: HeroTerminalLine[];
  className?: string;
}

const DEFAULT_LINES: HeroTerminalLine[] = [
  { kind: "cmd", text: "git merge feature/ai-summaries" },
  { kind: "out", text: "3 PRs labelled: feature, improvement" },
  { kind: "cmd", text: "npx shipyard publish --channel all" },
  { kind: "out", text: "Drafting release notes for v4.2.0…" },
  { kind: "out", text: "Summary: “AI summaries for every release”" },
  { kind: "ok", text: "✓ changelog  ✓ in-app widget  ✓ slack  ✓ email (8,214)" },
];

const LINE_STYLE: Record<HeroTerminalLine["kind"], string> = {
  cmd: "text-da-primary",
  out: "opacity-80",
  ok: "font-bold text-da-success",
};

export function HeroTerminal({
  kicker = "[ for engineering teams ]",
  title = "Merge the PR. The changelog writes itself.",
  description = "Shipyard listens to your repo, drafts release notes from labels and commits, and publishes them everywhere your users look — from one command or zero.",
  primaryCta = { label: "Start shipping free", href: "#signup" },
  install = "npx shipyard init",
  lines = DEFAULT_LINES,
  className,
}: HeroTerminalProps) {
  const reduce = useReducedMotion();
  const [tick, setTick] = useState(0);
  const [copied, setCopied] = useState(false);
  // Replay the terminal line by line (all lines visible immediately with reduced motion).
  const shown = reduce ? lines.length : Math.min(tick, lines.length);

  useEffect(() => {
    if (reduce) return;
    const id = window.setInterval(() => setTick((n) => (n >= lines.length ? n : n + 1)), 650);
    return () => window.clearInterval(id);
  }, [reduce, lines.length]);

  return (
    <section className={cn("da-section da-stroke-b bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <p className="font-da-mono text-xs font-bold tracking-da-label text-da-muted-fg uppercase">{kicker}</p>
        <h1 className="mt-4 max-w-5xl font-da-display text-[clamp(2.75rem,7vw,5.5rem)] leading-[0.95] tracking-da-display uppercase">{title}</h1>
        <div className="mt-8 grid gap-10 lg:grid-cols-[1fr_1.3fr] lg:items-start">
          <div>
            <p className="max-w-md text-lg text-da-muted-fg">{description}</p>
            <div className="mt-8 flex flex-wrap items-stretch gap-4">
              <a
                href={primaryCta.href}
                className="da-focus da-transition da-stroke inline-flex items-center bg-da-primary px-6 py-3.5 font-bold text-da-primary-fg shadow-da-md hover:translate-x-[6px] hover:translate-y-[6px] hover:shadow-none"
              >
                {primaryCta.label}
              </a>
              <button
                type="button"
                onClick={async () => {
                  await navigator.clipboard.writeText(install);
                  setCopied(true);
                  window.setTimeout(() => setCopied(false), 1500);
                }}
                className="da-focus da-stroke flex items-center gap-3 bg-da-surface px-4 font-da-mono text-sm font-bold text-da-surface-fg"
              >
                <span aria-hidden>$</span>
                {install}
                <span className="da-stroke-l pl-3 text-xs uppercase" aria-live="polite">
                  {copied ? "Copied" : "Copy"}
                </span>
              </button>
            </div>
          </div>

          <figure className="da-stroke bg-da-fg text-da-bg shadow-da-lg">
            <div className="flex items-center gap-2 border-b-[length:var(--da-border-width)] border-current px-4 py-2.5">
              <span aria-hidden className="size-3 bg-da-danger" />
              <span aria-hidden className="size-3 bg-da-warning" />
              <span aria-hidden className="size-3 bg-da-success" />
              <figcaption className="ml-3 font-da-mono text-xs font-bold tracking-da-label uppercase">~/acme-web — zsh</figcaption>
            </div>
            <pre className="min-h-72 overflow-x-auto p-5 font-da-mono text-sm leading-7 whitespace-pre-wrap" aria-label="Terminal session">
              {lines.map((l, i) => (
                <span key={i} className={cn("block", LINE_STYLE[l.kind], i >= shown && "invisible")}>
                  {l.kind === "cmd" && <span aria-hidden className="text-da-bg">$ </span>}
                  {l.text}
                </span>
              ))}
              <span aria-hidden className="inline-block h-5 w-2.5 translate-y-1 animate-pulse bg-da-primary motion-reduce:animate-none" />
            </pre>
          </figure>
        </div>
      </div>
    </section>
  );
}

export default HeroTerminal;