Hero Band

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

export interface HeroBandProps {
  title?: string;
  description?: string;
  primaryCta?: { label: string; href: string };
  secondaryCta?: { label: string; href: string };
  className?: string;
}

/** Stripe-style hero on a deep blue gradient band with a slanted bottom edge: headline and CTAs on the left, a stacked pair of payment UI cards (invoice + payment success) on the right. */
export function HeroBand({
  title = "Financial infrastructure for growing companies",
  description = "Invoices, payments, cards and reconciliation on one ledger. Built for finance teams that want control without the spreadsheets.",
  primaryCta = { label: "Start now", href: "#signup" },
  secondaryCta = { label: "Contact sales", href: "#sales" },
  className,
}: HeroBandProps) {
  return (
    <section className={cn("relative isolate overflow-hidden bg-da-bg pt-20 pb-28 text-da-fg sm:pt-28", className)}>
      <div
        aria-hidden
        className="absolute inset-0 -z-10 bg-[linear-gradient(115deg,var(--da-primary)_0%,color-mix(in_oklab,var(--da-primary)_75%,var(--da-fg))_55%,color-mix(in_oklab,var(--da-primary)_70%,var(--da-accent-fg))_100%)] [clip-path:polygon(0_0,100%_0,100%_78%,0_100%)]"
      />
      <div className="da-container grid items-center gap-12 lg:grid-cols-[1.1fr_1fr]">
        <div className="text-da-primary-fg">
          <h1 className="font-da-display text-[clamp(2.5rem,6vw,4.5rem)] leading-[1.02] font-extrabold tracking-da-display text-balance">{title}</h1>
          <p className="mt-5 max-w-lg text-lg text-pretty opacity-90">{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-fg px-6 font-semibold text-da-bg hover:opacity-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 inline-flex h-12 items-center rounded-da-md bg-da-primary-fg/15 px-6 font-semibold ring-1 ring-da-primary-fg/40 hover:bg-da-primary-fg/25"
            >
              {secondaryCta.label}
            </a>
          </div>
        </div>
        <div aria-hidden className="relative mx-auto h-[380px] w-full max-w-md">
          <div className="da-stroke absolute top-0 left-0 w-[88%] rounded-da-lg bg-da-surface p-5 text-da-surface-fg shadow-da-lg">
            <div className="flex items-center justify-between">
              <p className="font-da-display font-bold">Invoice INV-2041</p>
              <span className="rounded-da-pill bg-da-accent px-2 py-0.5 text-xs font-medium text-da-accent-fg">Sent</span>
            </div>
            <p className="mt-1 text-sm text-da-muted-fg">Northwind Traders · Net 30</p>
            <div className="mt-4 space-y-2 text-sm">
              {[
                ["Platform license (annual)", "$15,000.00"],
                ["Onboarding services", "$2,400.00"],
                ["Priority support", "$1,000.00"],
              ].map(([l, v]) => (
                <p key={l} className="flex justify-between border-b border-da-border pb-2">
                  <span>{l}</span>
                  <span className="font-da-mono">{v}</span>
                </p>
              ))}
            </div>
            <p className="mt-3 flex justify-between font-semibold">
              <span>Total</span>
              <span className="font-da-mono">$18,400.00</span>
            </p>
          </div>
          <div className="da-stroke absolute right-0 bottom-0 w-[70%] rounded-da-lg bg-da-surface p-5 text-da-surface-fg shadow-da-lg">
            <CheckCircle2 className="size-8 text-da-success" />
            <p className="mt-3 font-da-display text-lg font-bold">Payment received</p>
            <p className="font-da-mono text-2xl font-medium">$18,400.00</p>
            <p className="mt-1 text-xs text-da-muted-fg">ACH · reconciled automatically</p>
          </div>
        </div>
      </div>
    </section>
  );
}

export default HeroBand;