Features — list beside a big visual

import { Download, ShieldCheck, TrendingUp, Users, type LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";

const points: { icon: LucideIcon; title: string; text: string }[] = [
  { icon: TrendingUp, title: "Monthly income", text: "Paid, pending and late — side by side, month by month." },
  { icon: Users, title: "Best and slowest clients", text: "See who pays on day one and who needs a nudge." },
  { icon: ShieldCheck, title: "Tax set aside", text: "A running total of what to keep back for the tax bill." },
  { icon: Download, title: "One-click exports", text: "CSV and PDF packs, ready for your accountant." },
];
const months = [42, 55, 48, 62, 58, 70, 66, 74, 82, 78, 88, 94];
const highlight = 10;

export function FeaturesListVisual() {
  return (
    <section aria-labelledby="features-title" className="overflow-hidden bg-bg font-sans">
      <div className="mx-auto grid max-w-6xl items-center gap-8 px-4 py-16 sm:px-6 lg:grid-cols-[5fr_7fr] lg:gap-14 lg:py-24">
        <div>
          <p className="text-[13px] font-medium text-primary">Reports</p>
          <h2 id="features-title" className="mt-3.5 text-balance text-3xl font-semibold tracking-tight text-fg sm:text-4xl">
            Know where every rupee is, without a spreadsheet
          </h2>
          <ul className="mt-7">
            {points.map(({ icon: Icon, title, text }) => (
              <li key={title} className="grid grid-cols-[20px_1fr] gap-x-3.5 gap-y-1 border-t border-border py-4">
                <Icon className="row-span-2 mt-0.5 size-5 text-primary" aria-hidden />
                <h3 className="text-[15px] font-semibold tracking-tight text-fg">{title}</h3>
                <p className="text-sm leading-relaxed text-fg-muted">{text}</p>
              </li>
            ))}
          </ul>
        </div>

        {/* Picture bleeds off the right edge of the page */}
        <div aria-hidden className="-mr-4 rounded-l-xl bg-surface bg-gradient-to-br from-primary-soft to-surface py-5 pl-5 sm:-mr-6 lg:-mr-12 lg:py-8 lg:pl-8">
          <div className="overflow-hidden rounded-l-xl border border-r-0 border-border bg-bg shadow-2xl">
            <div className="flex h-9 items-center gap-1.5 border-b border-border bg-surface px-3.5">
              <span className="size-2.5 rounded-full bg-border-strong" /><span className="size-2.5 rounded-full bg-border-strong" /><span className="size-2.5 rounded-full bg-border-strong" />
            </div>
            <div className="grid gap-3.5 p-[18px] text-xs">
              <div className="flex items-center justify-between">
                <p className="text-sm font-semibold text-fg">Income, 2026</p>
                <span className="inline-flex items-center gap-1 rounded-full bg-success-soft px-2 py-0.5 font-medium text-success-fg"><TrendingUp className="size-3" />+18% vs 2025</span>
              </div>
              <div className="grid h-[150px] grid-cols-12 items-end gap-2 border-b border-border bg-[linear-gradient(var(--tst-border)_1px,transparent_1px)] bg-[length:100%_25%] pb-1.5">
                {months.map((h, i) => (
                  <span key={i} style={{ height: h + "%" }} className={cn("rounded-t-[3px]", i === highlight ? "bg-primary" : "bg-primary/30")} />
                ))}
              </div>
              <div className="flex gap-4 text-fg-muted">
                <span className="inline-flex items-center gap-1.5"><span className="size-2 rounded-[2px] bg-primary" />November</span>
                <span className="inline-flex items-center gap-1.5"><span className="size-2 rounded-[2px] bg-primary/30" />Other months</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}