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

const bars = [38, 52, 44, 60, 56, 72, 64, 80, 74, 92];

export function HeroBento() {
  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">
          <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">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 */}
        <div className="rounded-xl bg-primary p-6 text-primary-fg sm:col-span-2">
          <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 + "%" }} className={i === bars.length - 1 ? "flex-1 rounded-t-sm bg-primary-fg" : "flex-1 rounded-t-sm bg-primary-fg/35"} />
            ))}
          </div>
        </div>

        <div className="rounded-xl border border-border bg-surface p-6">
          <span className="grid size-10 place-items-center rounded bg-primary-soft text-primary-soft-fg"><Clock className="size-5" 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">
          <div className="flex [&>*]:-ml-2 [&>*:first-child]:ml-0">
            {["AR", "DO", "LM"].map((c) => (
              <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">{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>
  );
}