Features Tabs

"use client";

import { useId, useRef, useState, type KeyboardEvent } from "react";
import { cn } from "@/lib/utils";

export interface FeaturesTabsItem {
  label: string;
  title: string;
  description: string;
  bullets: string[];
  /** Lines shown in the mock panel on the right. */
  preview: string[];
}

export interface FeaturesTabsProps {
  kicker?: string;
  title?: string;
  tabs?: FeaturesTabsItem[];
  className?: string;
}

const DEFAULT_TABS: FeaturesTabsItem[] = [
  {
    label: "Changelog",
    title: "A public page worth bookmarking",
    description: "Fast, searchable, on your domain, with RSS and permalinks for every release.",
    bullets: ["Custom domain & theming", "Search & tag filters", "RSS / Atom / JSON feed"],
    preview: ["changelog.acme.dev", "v4.2.0 — AI summaries", "v4.1.3 — Slack digest fix", "v4.1.0 — 3× faster widget"],
  },
  {
    label: "Widget",
    title: "Announcements inside your product",
    description: "A 9 kB launcher that shows what's new exactly where users work.",
    bullets: ["Unread badge counts", "Targeting by plan or role", "Deep links to docs"],
    preview: ["<ShipyardWidget />", "● 3 unread updates", "→ Try AI summaries", "→ New billing page"],
  },
  {
    label: "Digests",
    title: "Email and Slack without the busywork",
    description: "Weekly or per-release digests to subscribers and your own #releases channel.",
    bullets: ["8,000+ subscriber lists", "Localized in 24 languages", "Slack & Teams"],
    preview: ["#releases", "Shipyard bot · 09:00", "This week: 3 releases", "Open rate 61%"],
  },
];

export function FeaturesTabs({ kicker = "[ 03 ] One release, every channel", title = "Pick a channel. Or all of them.", tabs = DEFAULT_TABS, className }: FeaturesTabsProps) {
  const [active, setActive] = useState(0);
  const baseId = useId();
  const refs = useRef<(HTMLButtonElement | null)[]>([]);
  const tab = tabs[active] ?? tabs[0];

  function onKeyDown(e: KeyboardEvent<HTMLDivElement>) {
    const delta = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0;
    if (!delta) return;
    e.preventDefault();
    const next = (active + delta + tabs.length) % tabs.length;
    setActive(next);
    refs.current[next]?.focus();
  }

  if (!tab) return null;

  return (
    <section className={cn("da-section da-stroke-b bg-da-bg text-da-fg", className)} aria-labelledby={`${baseId}-title`}>
      <div className="da-container">
        <p className="font-da-mono text-xs font-bold tracking-da-label text-da-muted-fg uppercase">{kicker}</p>
        <h2 id={`${baseId}-title`} className="mt-3 font-da-display text-[clamp(2rem,5vw,3.5rem)] leading-[0.95] tracking-da-display uppercase">
          {title}
        </h2>

        <div role="tablist" aria-label="Channels" onKeyDown={onKeyDown} className="da-stroke mt-10 inline-flex flex-wrap bg-da-surface">
          {tabs.map((t, i) => (
            <button
              key={t.label}
              ref={(el) => {
                refs.current[i] = el;
              }}
              id={`${baseId}-tab-${i}`}
              type="button"
              role="tab"
              aria-selected={i === active}
              aria-controls={`${baseId}-panel`}
              tabIndex={i === active ? 0 : -1}
              onClick={() => setActive(i)}
              className={cn(
                "da-focus da-transition px-5 py-3 font-da-mono text-sm font-bold tracking-da-label uppercase",
                i > 0 && "da-stroke-l",
                i === active ? "bg-da-fg text-da-bg" : "text-da-surface-fg hover:bg-da-primary hover:text-da-primary-fg",
              )}
            >
              {t.label}
            </button>
          ))}
        </div>

        <div
          id={`${baseId}-panel`}
          role="tabpanel"
          aria-labelledby={`${baseId}-tab-${active}`}
          className="da-stroke mt-6 grid bg-da-surface text-da-surface-fg shadow-da-lg lg:grid-cols-2"
        >
          <div className="p-8 sm:p-10">
            <h3 className="font-da-display text-3xl leading-none tracking-da-display uppercase">{tab.title}</h3>
            <p className="mt-4 text-lg text-da-muted-fg">{tab.description}</p>
            <ul className="mt-6 space-y-3">
              {tab.bullets.map((b) => (
                <li key={b} className="flex items-center gap-3 font-bold">
                  <span aria-hidden className="da-stroke size-4 bg-da-primary" />
                  {b}
                </li>
              ))}
            </ul>
          </div>
          <div aria-hidden className="da-stroke-t lg:da-stroke-l flex flex-col justify-center gap-3 bg-da-surface-2 p-8 font-da-mono text-sm lg:border-t-0">
            {tab.preview.map((line, i) => (
              <p key={line} className={cn("da-stroke bg-da-surface px-4 py-3 font-bold", i === 0 && "bg-da-fg text-da-bg")}>
                {line}
              </p>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

export default FeaturesTabs;