Hero Stacked

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

export interface HeroStackedCta {
  label: string;
  href: string;
}

export interface HeroStackedStat {
  value: string;
  label: string;
}

export interface HeroStackedRelease {
  version: string;
  date: string;
  tag: "new" | "improved" | "fixed";
  title: string;
}

export interface HeroStackedProps {
  kicker?: string;
  /** Each line is rendered on its own row; the `highlight` line gets the yellow block. */
  headline?: string[];
  highlight?: number;
  description?: string;
  primaryCta?: HeroStackedCta;
  secondaryCta?: HeroStackedCta;
  stats?: HeroStackedStat[];
  releases?: HeroStackedRelease[];
  sticker?: string;
  className?: string;
}

const TAG_STYLES: Record<HeroStackedRelease["tag"], string> = {
  new: "bg-da-success text-da-success-fg",
  improved: "bg-da-secondary text-da-secondary-fg",
  fixed: "bg-da-accent text-da-accent-fg",
};

export function HeroStacked({
  kicker = "v4.2 — AI release summaries are live",
  headline = ["Ship it.", "Say it.", "Loud."],
  highlight = 2,
  description = "Shipyard turns merged pull requests into changelogs, release notes and in-app announcements your users actually read. No more stale “What's new” pages.",
  primaryCta = { label: "Start free", href: "#signup" },
  secondaryCta = { label: "See a live changelog", href: "#demo" },
  stats = [
    { value: "2,400+", label: "teams shipping" },
    { value: "38k", label: "releases / month" },
    { value: "4.9/5", label: "on G2" },
  ],
  releases = [
    { version: "v4.2.0", date: "Today", tag: "new", title: "AI summaries for every release" },
    { version: "v4.1.3", date: "2 days ago", tag: "fixed", title: "Slack digest skipped weekend merges" },
    { version: "v4.1.0", date: "Last week", tag: "improved", title: "Widget loads 3× faster on mobile" },
  ],
  sticker = "Free for OSS",
  className,
}: HeroStackedProps) {
  return (
    <section className={cn("da-section da-stroke-b relative overflow-hidden bg-da-bg text-da-fg", className)}>
      <div className="da-container grid items-center gap-12 lg:grid-cols-[1.15fr_1fr]">
        <div>
          <p className="da-stroke inline-flex items-center gap-2 bg-da-surface px-3 py-1.5 font-da-mono text-xs font-bold tracking-da-label text-da-surface-fg uppercase">
            <span aria-hidden className="size-2 bg-da-success" />
            {kicker}
          </p>
          <h1 className="mt-6 font-da-display text-[clamp(3rem,9vw,6.5rem)] leading-[0.92] tracking-da-display uppercase">
            {headline.map((line, i) => (
              <span key={line} className="block">
                <span className={cn(i === highlight && "da-stroke -mx-1 inline-block bg-da-primary px-2 text-da-primary-fg shadow-da-md")}>{line}</span>
              </span>
            ))}
          </h1>
          <p className="mt-8 max-w-xl text-lg leading-relaxed text-da-muted-fg">{description}</p>
          <div className="mt-8 flex flex-wrap gap-4">
            <a
              href={primaryCta.href}
              className="da-focus da-transition da-stroke inline-flex items-center gap-2 bg-da-fg px-6 py-3.5 text-base font-bold text-da-bg shadow-da-md hover:translate-x-[6px] hover:translate-y-[6px] hover:shadow-none"
            >
              {primaryCta.label}
              <ArrowRight aria-hidden className="size-5" />
            </a>
            <a
              href={secondaryCta.href}
              className="da-focus da-transition da-stroke inline-flex items-center gap-2 bg-da-surface px-6 py-3.5 text-base font-bold text-da-surface-fg hover:bg-da-accent hover:text-da-accent-fg"
            >
              {secondaryCta.label}
            </a>
          </div>
          <dl className="mt-10 grid max-w-lg grid-cols-3 da-stroke-t">
            {stats.map((s, i) => (
              <div key={s.label} className={cn("flex flex-col-reverse justify-end pt-4", i > 0 && "da-stroke-l pl-4")}>
                <dt className="mt-1 font-da-mono text-[11px] tracking-da-label text-da-muted-fg uppercase">{s.label}</dt>
                <dd className="font-da-display text-2xl tracking-da-display sm:text-3xl">{s.value}</dd>
              </div>
            ))}
          </dl>
        </div>

        <div className="relative">
          <div className="da-stroke bg-da-surface text-da-surface-fg shadow-da-lg">
            <div className="da-stroke-b flex items-center justify-between bg-da-secondary px-4 py-2.5 text-da-secondary-fg">
              <span className="font-da-mono text-xs font-bold tracking-da-label uppercase">shipyard.dev/changelog</span>
              <span aria-hidden className="flex gap-1.5">
                <span className="da-stroke size-3 bg-da-primary" />
                <span className="da-stroke size-3 bg-da-accent" />
                <span className="da-stroke size-3 bg-da-surface" />
              </span>
            </div>
            <ol className="[&>li+li]:da-stroke-t">
              {releases.map((r) => (
                <li key={r.version} className="flex items-start gap-4 p-4 sm:p-5">
                  <GitCommitHorizontal aria-hidden className="mt-0.5 size-5 shrink-0" />
                  <div className="min-w-0 flex-1">
                    <div className="flex flex-wrap items-center gap-2">
                      <span className="font-da-mono text-xs font-bold">{r.version}</span>
                      <span className={cn("da-stroke px-1.5 py-0.5 font-da-mono text-[10px] font-bold tracking-da-label uppercase", TAG_STYLES[r.tag])}>
                        {r.tag}
                      </span>
                      <span className="ml-auto font-da-mono text-[11px] text-da-muted-fg">{r.date}</span>
                    </div>
                    <p className="mt-1.5 font-bold leading-snug">{r.title}</p>
                  </div>
                </li>
              ))}
            </ol>
          </div>
          {sticker && (
            <p className="da-stroke absolute -top-5 -right-2 rotate-6 bg-da-accent px-3 py-2 font-da-display text-sm tracking-da-display text-da-accent-fg uppercase shadow-da-sm sm:-right-5">
              {sticker}
            </p>
          )}
        </div>
      </div>
    </section>
  );
}

export default HeroStacked;