import { ArrowRight, Check } from "lucide-react";

/* Add once to globals.css:
@keyframes panel-1 { to { transform: translate(30%, 26%) scale(1.1); } }
@keyframes panel-2 { to { transform: translate(-28%, -20%) scale(.9); } }
@keyframes panel-3 { to { transform: translate(24%, -30%) scale(1.15); } }
@keyframes bob { 50% { transform: translateY(-8px); } }
*/

const points = ["Next-day payouts in 32 countries", "Tax forms collected for you", "One API for orders, refunds and payouts"];
const bars = [38, 52, 44, 66, 58, 74, 62, 90];
const rows = [
  { name: "Oakline Studio", cur: "EUR", amount: "€3,180.40" },
  { name: "Larkspur & Co", cur: "GBP", amount: "£1,920.00" },
  { name: "Blue Pine Supply", cur: "INR", amount: "₹84,500" },
];
const field = "absolute aspect-square rounded-full will-change-transform motion-reduce:animate-none";

export function HeroSplitPanel() {
  return (
    <section aria-labelledby="split-title" className="bg-bg px-5 pb-24 pt-5 font-sans text-fg sm:px-10">
      <div className="mx-auto grid max-w-[1080px] items-center gap-10 lg:grid-cols-[1fr_1.08fr] lg:gap-14">
        <div className="flex flex-col items-start gap-5">
          <span className="rounded-full bg-primary-soft px-2 py-0.5 text-xs font-medium text-primary-soft-fg">Payouts for marketplaces</span>
          <h1 id="split-title" className="text-balance text-4xl font-medium leading-[1.02] tracking-[-0.04em] sm:text-5xl lg:text-6xl animate-rise motion-reduce:animate-none">
            Pay every seller on time, in their currency.
          </h1>
          <p className="max-w-xl text-pretty text-base leading-relaxed text-fg-muted sm:text-lg">
            Ledgerline splits each order, holds the fees and sends sellers their share in 40 currencies — on the schedule you set.
          </p>
          <ul className="grid gap-2 text-sm text-fg-muted">
            {points.map((p) => <li key={p} className="flex items-center gap-2"><Check className="size-4 text-primary" aria-hidden />{p}</li>)}
          </ul>
          <div className="flex flex-wrap gap-2.5">
            <a href="/signup" className="inline-flex h-11 items-center gap-1.5 rounded bg-primary px-5 font-medium text-primary-fg hover:bg-primary-hover active:scale-[.97]">
              Open an account <ArrowRight className="size-4" aria-hidden />
            </a>
            <a href="/docs" className="inline-flex h-11 items-center rounded px-5 font-medium hover:bg-surface-2">Read the docs</a>
          </div>
        </div>

        <div className="relative isolate grid min-h-[440px] place-items-center overflow-hidden rounded-xl border border-[color-mix(in_srgb,var(--tst-primary)_16%,var(--tst-border))] bg-[color-mix(in_srgb,var(--tst-primary)_10%,var(--tst-bg))] px-6 py-14">
          <div aria-hidden className="absolute inset-0 -z-10 overflow-hidden">
            <span className={field + " -left-[24%] -top-[30%] w-[80%] bg-[radial-gradient(closest-side,color-mix(in_srgb,var(--tst-primary)_70%,transparent),transparent)] animate-[panel-1_18s_ease-in-out_infinite_alternate]"} />
            <span className={field + " -right-[30%] top-[10%] w-[78%] bg-[radial-gradient(closest-side,color-mix(in_srgb,var(--tst-info)_60%,transparent),transparent)] animate-[panel-2_22s_ease-in-out_infinite_alternate]"} />
            <span className={field + " -bottom-[44%] left-[10%] w-[70%] bg-[radial-gradient(closest-side,color-mix(in_srgb,var(--tst-warning)_58%,transparent),transparent)] animate-[panel-3_26s_ease-in-out_infinite_alternate]"} />
          </div>
          <div aria-hidden className="absolute left-[18px] top-[18px] hidden items-center gap-2.5 rounded border border-border bg-bg px-3 py-2 text-[12.5px] shadow-[0_16px_32px_-18px_rgb(0_0_0/.4)] animate-[bob_7s_ease-in-out_infinite] motion-reduce:animate-none sm:flex">
            <span className="grid size-[22px] place-items-center rounded-full bg-success-soft text-success"><Check className="size-3" /></span>
            <span><b className="font-medium">Paid</b> · Tidewell Goods · $2,400.00</span>
          </div>
          <div className="grid w-full max-w-[340px] gap-3.5 rounded-lg border border-border bg-bg p-[18px] shadow-[0_30px_60px_-30px_rgb(0_0_0/.45)]">
            <div className="flex items-center justify-between text-[13px]">
              <span className="text-fg-muted">Scheduled payouts</span>
              <span className="inline-flex items-center gap-1.5 rounded-full bg-success-soft px-2 py-0.5 text-xs font-medium text-success-fg"><span className="size-1.5 rounded-full bg-current" />On track</span>
            </div>
            <div>
              <p className="text-[30px] font-medium leading-tight tracking-[-0.03em] tabular-nums">$48,210.00</p>
              <p className="text-[12.5px] text-fg-subtle">To 312 sellers · Friday, 14 March</p>
            </div>
            <div className="flex h-16 items-end gap-1.5" aria-hidden>
              {bars.map((h, i) => <span key={i} className={"flex-1 rounded-t-sm " + (i === bars.length - 1 ? "bg-primary" : "bg-[color-mix(in_srgb,var(--tst-primary)_22%,var(--tst-surface-2))]")} style={{ height: h + "%" }} />)}
            </div>
            {rows.map((r) => (
              <div key={r.name} className="flex items-center gap-2.5 border-t border-border pt-2.5 text-[13px]">
                <span className="flex-1 truncate">{r.name}</span>
                <span className="rounded-full bg-surface-2 px-2 py-0.5 text-xs text-fg-muted">{r.cur}</span>
                <b className="font-medium tabular-nums">{r.amount}</b>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}