Hero Cli

"use client";

import { useState } from "react";
import { ArrowRight, Check, Copy } from "lucide-react";
import { cn } from "@/lib/utils";

export interface HeroCliProps {
  badge?: string;
  title?: string;
  description?: string;
  command?: string;
  primaryCta?: { label: string; href: string };
  /** Lines printed in the terminal preview. */
  output?: { text: string; tone?: "muted" | "success" | "accent" }[];
  className?: string;
}

const TONE = { muted: "text-da-muted-fg", success: "text-da-success", accent: "text-da-accent-fg" } as const;

/** Developer-first centered hero: install command with copy button and a terminal output preview. */
export function HeroCli({
  badge = "Open source agent · v2.4",
  title = "Incident response, configured as code",
  description = "Define rotations, escalation policies and status pages in YAML. Review them in pull requests. Tracewise keeps production in sync.",
  command = "npx tracewise init",
  primaryCta = { label: "Read the quickstart", href: "#docs" },
  output = [
    { text: "✓ Detected GitHub org acme-inc", tone: "success" },
    { text: "✓ Imported 4 rotations from PagerDuty", tone: "success" },
    { text: "✓ Wrote tracewise.yaml (12 services, 3 policies)", tone: "success" },
    { text: "→ Run `tracewise apply` to go live", tone: "accent" },
  ],
  className,
}: HeroCliProps) {
  const [copied, setCopied] = useState(false);

  const copy = async () => {
    try {
      await navigator.clipboard.writeText(command);
      setCopied(true);
      window.setTimeout(() => setCopied(false), 1600);
    } catch {
      setCopied(false);
    }
  };

  return (
    <section className={cn("relative isolate overflow-hidden bg-da-bg py-20 text-da-fg sm:py-28", className)}>
      <div
        aria-hidden
        className="absolute inset-0 -z-10 [background-image:radial-gradient(var(--da-border-strong)_1px,transparent_1px)] [background-size:20px_20px] [mask-image:radial-gradient(ellipse_50%_60%_at_50%_30%,black,transparent)]"
      />
      <div className="da-container flex flex-col items-center text-center">
        <p className="da-stroke rounded-da-pill bg-da-surface px-3 py-1 font-da-mono text-xs text-da-muted-fg">{badge}</p>
        <h1 className="mt-6 max-w-3xl text-[clamp(2.25rem,5.5vw,4rem)] leading-[1.03] font-semibold tracking-da-display text-balance">{title}</h1>
        <p className="mt-5 max-w-xl text-[17px] leading-relaxed text-pretty text-da-muted-fg">{description}</p>

        <div className="mt-8 flex w-full max-w-md flex-col gap-3 sm:flex-row">
          <div className="da-stroke flex h-11 min-w-0 sm:flex-1 items-center gap-2 rounded-da-md bg-da-surface pr-1 pl-3.5 font-da-mono text-sm text-da-surface-fg shadow-da-sm">
            <span aria-hidden className="text-da-muted-fg">
              $
            </span>
            <code className="min-w-0 flex-1 truncate text-left">{command}</code>
            <button
              type="button"
              onClick={copy}
              aria-label={copied ? "Copied" : "Copy command"}
              className="da-focus da-transition grid size-9 place-items-center rounded-da-sm text-da-muted-fg hover:bg-da-muted hover:text-da-fg"
            >
              {copied ? <Check aria-hidden className="size-4 text-da-success" /> : <Copy aria-hidden className="size-4" />}
            </button>
            <span role="status" className="sr-only">
              {copied ? "Command copied to clipboard" : ""}
            </span>
          </div>
          <a
            href={primaryCta.href}
            className="da-focus da-transition group inline-flex h-11 items-center justify-center gap-1.5 rounded-da-md bg-da-fg px-4 text-sm font-medium text-da-bg hover:bg-da-fg/85"
          >
            {primaryCta.label}
            <ArrowRight aria-hidden className="da-transition size-4 group-hover:translate-x-0.5" />
          </a>
        </div>

        <div className="da-stroke mt-12 w-full max-w-2xl overflow-hidden rounded-da-lg bg-da-surface text-left shadow-da-lg">
          <div className="flex items-center gap-2 border-b border-da-border px-4 py-2.5">
            <span aria-hidden className="flex gap-1.5">
              <span className="size-2.5 rounded-full bg-da-fg/15" />
              <span className="size-2.5 rounded-full bg-da-fg/15" />
              <span className="size-2.5 rounded-full bg-da-fg/15" />
            </span>
            <p className="mx-auto font-da-mono text-[11px] text-da-muted-fg">~/acme/infra</p>
          </div>
          <pre className="overflow-x-auto p-4 font-da-mono text-[13px] leading-6 text-da-surface-fg">
            <span className="text-da-muted-fg">$ </span>
            {command}
            {"\n"}
            {output.map((l, i) => (
              <span key={i} className={cn("block", TONE[l.tone ?? "muted"])}>
                {l.text}
              </span>
            ))}
          </pre>
        </div>
      </div>
    </section>
  );
}

export default HeroCli;