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

/* Add once to globals.css:
@keyframes tile-in { from { opacity: 0; transform: translateY(22px) scale(.97); } }
@keyframes turn-once { from { rotate: -270deg; } }
*/

const bars = [38, 52, 44, 60, 56, 72, 64, 80, 74, 92];
const tile = "animate-[tile-in_.8s_cubic-bezier(.2,.7,.1,1)_both] motion-reduce:animate-fade";
const at = (i: number) => ({ animationDelay: 100 + i * 130 + "ms" });

export function HeroBentoMotion() {
  return (
    <section aria-labelledby="hero-title" className="bg-surface font-sans">
      <div className="mx-auto grid max-w-6xl gap-3 px-4 py-12 sm:grid-cols-2 sm:px-6 sm:py-20 lg:grid-cols-4">
        {/* Headline tile: 2 × 2 */}
        <div className={"flex flex-col justify-between gap-8 rounded-xl border border-border bg-bg p-6 sm:col-span-2 sm:p-9 lg:row-span-2 " + tile} style={at(0)}>
          <div className="flex flex-col items-start gap-5">
            <p className="text-[13px] font-medium text-primary">Fernbill</p>
            <h1 id="hero-title" className="text-balance text-4xl font-semibold leading-[1.05] tracking-tight text-fg lg:text-5xl">
              Get paid like a company, work like a freelancer.
            </h1>
            <p className="text-pretty text-base leading-relaxed text-fg-muted">
              Invoices, reminders and payments that run on their own, so the admin fits in a coffee break.
            </p>
          </div>
          <div className="flex flex-wrap gap-3">
            <a href="/signup" className="inline-flex h-11 items-center rounded bg-primary px-5 text-[15px] font-medium text-primary-fg transition hover:bg-primary-hover active:scale-[.97]">Start free</a>
            <a href="/pricing" className="inline-flex h-11 items-center gap-1.5 rounded px-5 text-[15px] font-medium text-fg transition hover:bg-surface-2">
              See pricing <ArrowRight className="size-4" aria-hidden />
            </a>
          </div>
        </div>

        {/* Brand metric tile: the bars grow up after the tile lands */}
        <div className={"rounded-xl bg-primary p-6 text-primary-fg sm:col-span-2 " + tile} style={at(1)}>
          <p className="text-[13px] opacity-80">Collected this quarter</p>
          <p className="text-4xl font-semibold tracking-tight tabular-nums">$48,210</p>
          <div aria-hidden className="mt-4 flex h-14 items-end gap-1.5">
            {bars.map((h, i) => (
              <span
                key={i}
                style={{ height: h + "%", animationDelay: 600 + i * 55 + "ms" }}
                className={"flex-1 origin-bottom rounded-t-sm animate-grow-y motion-reduce:animate-fade " + (i === bars.length - 1 ? "bg-primary-fg" : "bg-primary-fg/35")}
              />
            ))}
          </div>
        </div>

        <div className={"rounded-xl border border-border bg-surface p-6 " + tile} style={at(2)}>
          <span className="grid size-10 place-items-center rounded bg-primary-soft text-primary-soft-fg">
            <Clock className="size-5 animate-[turn-once_1.1s_cubic-bezier(.2,.7,.1,1)_.8s_both] motion-reduce:animate-none" aria-hidden />
          </span>
          <p className="mt-5 text-3xl font-semibold tracking-tight text-fg">2 days</p>
          <p className="text-[13px] text-fg-muted">from paid to your bank</p>
        </div>
        <div className={"rounded-xl border border-border bg-surface p-6 " + tile} style={at(3)}>
          <div className="flex [&>*]:-ml-2 [&>*:first-child]:ml-0">
            {["AR", "DO", "LM"].map((c, i) => (
              <span key={c} className="grid size-9 place-items-center rounded-full border-2 border-surface bg-primary-soft text-[13px] font-medium text-primary-soft-fg animate-pop motion-reduce:animate-fade" style={{ animationDelay: 950 + i * 90 + "ms" }}>{c}</span>
            ))}
          </div>
          <p className="mt-5 text-3xl font-semibold tracking-tight tabular-nums text-fg">12,400</p>
          <p className="text-[13px] text-fg-muted">studios bill with Fernbill</p>
        </div>
      </div>
    </section>
  );
}