Features Tabs

"use client";

import { Tabs } from "radix-ui";
import { Check } from "lucide-react";
import { cn } from "@/lib/utils";

export interface FeaturesTabsItem {
  id: string;
  label: string;
  title: string;
  text: string;
  points: string[];
  rows: { label: string; value: string; tone?: "success" | "warning" | "danger" }[];
}

export interface FeaturesTabsProps {
  eyebrow?: string;
  title?: string;
  items?: FeaturesTabsItem[];
  className?: string;
}

const TONE = { success: "text-da-success", warning: "text-da-fg", danger: "text-da-danger" } as const;

const DEFAULT_ITEMS: FeaturesTabsItem[] = [
  {
    id: "invoice",
    label: "Invoice",
    title: "Invoices that get paid on time",
    text: "Create, send and track invoices with embedded payment links and automatic tax calculation.",
    points: ["Templates per entity and currency", "Partial payments and deposits", "Customer portal with history"],
    rows: [
      { label: "INV-2041 · Northwind", value: "Paid", tone: "success" },
      { label: "INV-2040 · Lumen Health", value: "Due Oct 14", tone: "warning" },
      { label: "INV-2039 · Parcel", value: "Overdue 6d", tone: "danger" },
    ],
  },
  {
    id: "collect",
    label: "Collect",
    title: "Collections on autopilot",
    text: "Escalating reminders by email and SMS, with pause rules for key accounts.",
    points: ["Custom cadences per segment", "Promise-to-pay tracking", "One-click payment plans"],
    rows: [
      { label: "Reminder 1 · friendly", value: "Sent", tone: "success" },
      { label: "Reminder 2 · firm", value: "Scheduled Oct 16" },
      { label: "Escalate to AM", value: "If unpaid Oct 21" },
    ],
  },
  {
    id: "reconcile",
    label: "Reconcile",
    title: "Reconciliation you don’t have to do",
    text: "Bank feeds are matched to open invoices in real time; exceptions land in a single queue.",
    points: ["97% auto-match rate", "Rules for fees and FX", "Audit-ready exports"],
    rows: [
      { label: "ACH $18,400.00", value: "Matched INV-2041", tone: "success" },
      { label: "Wire $6,200.00", value: "Needs review", tone: "warning" },
      { label: "Card $3,120.00", value: "Matched INV-2038", tone: "success" },
    ],
  },
];

/** Underline tabs (Radix Tabs) switching between product areas: copy + check points on the left, a bordered data card (status rows) on the right. */
export function FeaturesTabs({
  eyebrow = "How it works",
  title = "From invoice to reconciled, without the busywork",
  items = DEFAULT_ITEMS,
  className,
}: FeaturesTabsProps) {
  return (
    <section aria-labelledby="nc-tabs-title" className={cn("da-section bg-da-surface-2 text-da-fg", className)}>
      <div className="da-container">
        <p className="text-xs font-semibold tracking-da-label text-da-primary uppercase">{eyebrow}</p>
        <h2
          id="nc-tabs-title"
          className="mt-3 max-w-2xl font-da-display text-[clamp(2rem,4.5vw,3rem)] leading-[1.1] font-extrabold tracking-da-display text-balance"
        >
          {title}
        </h2>
        <Tabs.Root defaultValue={items[0]?.id} className="mt-10">
          <Tabs.List aria-label="Product areas" className="flex gap-8 relative overflow-x-auto border-b border-da-border-strong">
            {items.map((it, i) => (
              <Tabs.Trigger
                key={it.id}
                value={it.id}
                className="da-focus da-transition -mb-px flex shrink-0 items-center gap-2 border-b-2 border-transparent pb-3 font-semibold text-da-muted-fg hover:text-da-fg data-[state=active]:border-da-primary data-[state=active]:text-da-fg"
              >
                <span className="font-da-mono text-xs text-da-muted-fg">0{i + 1}</span>
                {it.label}
              </Tabs.Trigger>
            ))}
          </Tabs.List>
          {items.map((it) => (
            <Tabs.Content
              key={it.id}
              value={it.id}
              className="da-focus grid items-center gap-10 rounded-da-md pt-10 transition-opacity duration-(--da-duration) starting:opacity-0 lg:grid-cols-2"
            >
              <div>
                <h3 className="font-da-display text-2xl font-bold">{it.title}</h3>
                <p className="mt-3 text-da-muted-fg">{it.text}</p>
                <ul className="mt-6 space-y-2.5">
                  {it.points.map((p) => (
                    <li key={p} className="flex items-center gap-2.5">
                      <Check aria-hidden className="size-4 text-da-primary" strokeWidth={3} />
                      {p}
                    </li>
                  ))}
                </ul>
              </div>
              <div className="da-stroke rounded-da-lg bg-da-surface p-5 text-da-surface-fg shadow-da-md">
                <p className="text-sm font-semibold">{it.label}</p>
                <ul className="mt-3 divide-y divide-da-border">
                  {it.rows.map((r) => (
                    <li key={r.label} className="flex items-center justify-between gap-4 py-3 text-sm">
                      <span className="font-da-mono text-xs">{r.label}</span>
                      <span className={cn("font-semibold", r.tone ? TONE[r.tone] : "text-da-muted-fg")}>{r.value}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </Tabs.Content>
          ))}
        </Tabs.Root>
      </div>
    </section>
  );
}

export default FeaturesTabs;