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

const lines = [
  { item: "Website design", amount: "$2,400.00" },
  { item: "Copywriting, 6 pages", amount: "$900.00" },
  { item: "Hosting set-up", amount: "$150.00" },
];
const customers = ["AR", "DO", "LM"];

export function HeroSplit() {
  return (
    <section aria-labelledby="hero-title" className="bg-bg font-sans">
      <div className="mx-auto grid max-w-6xl items-center gap-12 px-4 py-16 sm:px-6 sm:py-24 lg:grid-cols-[1.05fr_1fr] lg:gap-16">
        <div className="flex flex-col items-start">
          <p className="text-[13px] font-medium text-primary">For freelancers and small studios</p>
          <h1 id="hero-title" className="mt-4 text-balance text-4xl font-semibold leading-[1.08] tracking-tight text-fg sm:text-5xl">
            Send the invoice. Fernbill does the chasing.
          </h1>
          <p className="mt-5 max-w-lg text-pretty text-base leading-relaxed text-fg-muted sm:text-lg">
            Make an invoice in a minute, add a pay link, and let polite reminders go out until it’s paid.
          </p>
          <div className="mt-8 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="/demo" className="inline-flex h-11 items-center gap-1.5 rounded px-5 text-[15px] font-medium text-fg transition hover:bg-surface-2">
              Book a demo <ArrowRight className="size-4" aria-hidden />
            </a>
          </div>
          <div className="mt-8 flex items-center gap-3 text-[13px] text-fg-subtle">
            <div className="flex [&>*]:-ml-2 [&>*:first-child]:ml-0">
              {customers.map((c) => (
                <span key={c} className="inline-grid size-7 place-items-center rounded-full border-2 border-bg bg-primary-soft text-[11px] font-medium text-primary-soft-fg">{c}</span>
              ))}
            </div>
            Used by freelancers in 40 countries
          </div>
        </div>

        {/* Product picture, drawn with plain elements so it follows the theme */}
        <div aria-hidden className="relative mb-5 rounded-xl border border-border bg-surface p-4 shadow-2xl shadow-fg/10">
          <div className="grid gap-3 rounded-lg border border-border bg-bg p-5 text-[13px]">
            <div className="flex items-center justify-between gap-3">
              <p className="text-[15px] font-semibold text-fg">Invoice INV-1042</p>
              <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" /> Paid
              </span>
            </div>
            <div className="flex justify-between text-fg-subtle"><span>Kaveri Foods</span><span>Due 30 Oct</span></div>
            <hr className="border-border" />
            {lines.map((l) => (
              <div key={l.item} className="flex justify-between gap-3 text-fg">
                <span className="truncate">{l.item}</span>
                <span className="tabular-nums">{l.amount}</span>
              </div>
            ))}
            <div className="flex justify-between border-t border-border pt-3 text-[15px] font-semibold text-fg">
              <span>Total</span><span className="tabular-nums">$3,450.00</span>
            </div>
          </div>
          <div className="absolute -bottom-5 right-4 flex items-center gap-3 rounded-lg border border-border bg-bg px-3 py-2.5 text-[13px] shadow-lg">
            <span className="inline-grid size-7 place-items-center rounded-full bg-success-soft text-success-fg"><Check className="size-3.5" /></span>
            <div>
              <p className="font-medium text-fg">Payment received</p>
              <p className="text-fg-subtle">$3,450 from Kaveri Foods</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}