Hero Dashboard

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

export interface HeroDashboardProps {
  eyebrow?: string;
  title?: string;
  description?: string;
  primaryCta?: { label: string; href: string };
  secondaryCta?: { label: string; href: string };
  trust?: string;
  className?: string;
}

const INVOICES = [
  { id: "INV-2041", client: "Northwind Traders", amount: "$18,400.00", status: "Paid" },
  { id: "INV-2040", client: "Lumen Health", amount: "$6,250.00", status: "Due in 5 days" },
  { id: "INV-2039", client: "Parcel Logistics", amount: "$42,900.00", status: "Overdue" },
  { id: "INV-2038", client: "Quanta Labs", amount: "$3,120.00", status: "Paid" },
];

const STATUS: Record<string, string> = {
  Paid: "bg-da-success/12 text-da-success",
  Overdue: "bg-da-danger/10 text-da-danger",
};

/** Split hero: eyebrow, strong headline, copy, blue + bordered CTAs and a compliance line; on the right a finance dashboard mock (KPIs, bar chart, invoice table). */
export function HeroDashboard({
  eyebrow = "Accounts receivable, automated",
  title = "Get paid 2× faster and close the books in days",
  description = "Ledgerly sends branded invoices, chases late payments and reconciles every transfer automatically — so your finance team can focus on forecasting.",
  primaryCta = { label: "Start free trial", href: "#signup" },
  secondaryCta = { label: "Book a demo", href: "#demo" },
  trust = "SOC 2 Type II · ISO 27001 · GDPR",
  className,
}: HeroDashboardProps) {
  const bars = [42, 55, 48, 62, 70, 66, 81, 77, 90, 86, 94, 100];
  return (
    <section className={cn("overflow-hidden bg-da-bg py-16 text-da-fg sm:py-24", className)}>
      <div className="da-container grid items-center gap-14 lg:grid-cols-[1fr_1.15fr]">
        <div>
          <p className="text-xs font-semibold tracking-da-label text-da-primary uppercase">{eyebrow}</p>
          <h1 className="mt-4 font-da-display text-[clamp(2.5rem,5.5vw,4rem)] leading-[1.05] font-extrabold tracking-da-display text-balance">{title}</h1>
          <p className="mt-5 max-w-lg text-lg text-pretty text-da-muted-fg">{description}</p>
          <div className="mt-8 flex flex-wrap gap-3">
            <a
              href={primaryCta.href}
              className="da-focus da-transition group inline-flex h-12 items-center gap-2 rounded-da-md bg-da-primary px-6 font-semibold text-da-primary-fg shadow-da-sm hover:bg-da-primary/90"
            >
              {primaryCta.label}
              <ArrowRight aria-hidden className="da-transition size-4 group-hover:translate-x-0.5" />
            </a>
            <a
              href={secondaryCta.href}
              className="da-focus da-transition da-stroke inline-flex h-12 items-center rounded-da-md bg-da-surface px-6 font-semibold hover:border-da-border-strong"
            >
              {secondaryCta.label}
            </a>
          </div>
          <p className="mt-6 inline-flex items-center gap-2 text-sm text-da-muted-fg">
            <ShieldCheck aria-hidden className="size-4 text-da-success" /> {trust}
          </p>
        </div>
        <figure aria-label="Ledgerly dashboard example" className="da-stroke relative rounded-da-lg bg-da-surface p-4 text-da-surface-fg shadow-da-lg sm:p-5">
          <div className="grid gap-3 sm:grid-cols-3">
            {[
              { l: "Outstanding", v: "$214,380", d: "−12% vs last month", good: true },
              { l: "Avg. days to pay", v: "18.4", d: "−9.2 days", good: true },
              { l: "Overdue", v: "$42,900", d: "1 invoice", good: false },
            ].map((k) => (
              <div key={k.l} className="da-stroke rounded-da-md p-3">
                <p className="text-xs text-da-muted-fg">{k.l}</p>
                <p className="mt-1 font-da-mono text-lg font-medium tabular-nums">{k.v}</p>
                <p className={cn("text-xs font-medium", k.good ? "text-da-success" : "text-da-danger")}>{k.d}</p>
              </div>
            ))}
          </div>
          <div className="da-stroke mt-3 rounded-da-md p-3">
            <div className="flex items-center justify-between">
              <p className="text-sm font-semibold">Collected</p>
              <p className="text-xs text-da-muted-fg">Last 12 months</p>
            </div>
            <div aria-hidden className="mt-3 flex h-24 items-end gap-1.5">
              {bars.map((b, i) => (
                <span
                  key={i}
                  className={cn("flex-1 rounded-t-[3px]", i === bars.length - 1 ? "bg-da-primary" : "bg-da-primary/25")}
                  style={{ height: `${b}%` }}
                />
              ))}
            </div>
          </div>
          <table className="mt-3 w-full text-left text-sm">
            <caption className="sr-only">Recent invoices</caption>
            <thead className="text-xs text-da-muted-fg">
              <tr className="border-b border-da-border">
                <th scope="col" className="py-2 font-medium">
                  Invoice
                </th>
                <th scope="col" className="hidden py-2 font-medium sm:table-cell">
                  Client
                </th>
                <th scope="col" className="py-2 text-right font-medium">
                  Amount
                </th>
                <th scope="col" className="py-2 text-right font-medium">
                  Status
                </th>
              </tr>
            </thead>
            <tbody>
              {INVOICES.map((r) => (
                <tr key={r.id} className="border-b border-da-border last:border-0">
                  <td className="py-2 font-da-mono text-xs">{r.id}</td>
                  <td className="hidden py-2 sm:table-cell">{r.client}</td>
                  <td className="py-2 text-right font-da-mono text-xs tabular-nums">{r.amount}</td>
                  <td className="py-2 text-right">
                    <span
                      className={cn("rounded-da-pill px-2 py-0.5 text-xs font-medium whitespace-nowrap", STATUS[r.status] ?? "bg-da-accent text-da-accent-fg")}
                    >
                      {r.status}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </figure>
      </div>
    </section>
  );
}

export default HeroDashboard;