Split with visual

import { Badge, Button } from "@cronus-ui/ui";
import { ArrowRight, Check } from "lucide-react";

export function CtaSplitVisualBlock() {
  return (
    <section className="px-6 py-20">
      <div className="mx-auto grid max-w-6xl items-center gap-10 rounded-2xl border border-border bg-surface-raised p-8 shadow-lg sm:p-10 lg:grid-cols-2 lg:gap-14">
        <div>
          <Badge variant="primary">Get started</Badge>
          <h2 className="mt-4 text-balance font-display text-3xl font-semibold tracking-tight text-fg sm:text-4xl">
            Your product surface, themed and shipped this week.
          </h2>
          <p className="mt-4 max-w-md text-fg-secondary">
            Assemble the screens your customers see every day from blocks that already speak your
            brand.
          </p>
          <ul className="mt-6 flex flex-col gap-3">
            {[
              "50+ production-ready blocks",
              "Dark and light themes included",
              "Accessible and RTL-safe by default",
            ].map((item) => (
              <li key={item} className="flex items-center gap-2.5 text-sm text-fg-secondary">
                <span className="grid size-5 shrink-0 place-items-center rounded-full bg-success/15">
                  <Check aria-hidden="true" className="size-3 text-success" />
                </span>
                {item}
              </li>
            ))}
          </ul>
          <div className="mt-8 flex flex-col gap-3 sm:flex-row">
            <Button variant="primary" size="lg">
              Start building
              <ArrowRight aria-hidden="true" />
            </Button>
            <Button variant="ghost" size="lg">
              Explore blocks
            </Button>
          </div>
        </div>

        <div className="relative">
          <div
            aria-hidden="true"
            className="pointer-events-none absolute -inset-6 rounded-3xl bg-gradient-primary opacity-20 blur-2xl"
          />
          <div className="relative overflow-hidden rounded-2xl border border-border bg-surface-overlay shadow-lg">
            <div className="flex items-center gap-1.5 border-b border-border bg-surface-inset px-4 py-3">
              <span aria-hidden="true" className="size-2.5 rounded-full bg-error/60" />
              <span aria-hidden="true" className="size-2.5 rounded-full bg-warning/60" />
              <span aria-hidden="true" className="size-2.5 rounded-full bg-success/60" />
              <span className="ms-3 text-xs text-fg-tertiary">app.cronus.com/overview</span>
            </div>
            <div className="flex flex-col gap-5 p-5">
              <div className="flex items-center justify-between gap-4">
                <div>
                  <p className="text-xs text-fg-tertiary">Monthly recurring revenue</p>
                  <p className="mt-1 font-display text-2xl font-semibold text-fg">$48,210</p>
                </div>
                <Badge variant="success">+18.2%</Badge>
              </div>
              <div aria-hidden="true" className="flex h-24 items-end gap-1.5">
                {[35, 55, 42, 70, 52, 80, 64, 92, 76, 100].map((height) => (
                  <div
                    key={height}
                    className="flex-1 rounded-t-sm bg-primary/70"
                    style={{ height: `${height}%` }}
                  />
                ))}
              </div>
              <div className="grid grid-cols-2 gap-3">
                <div className="rounded-xl border border-border bg-surface-inset px-3.5 py-3">
                  <p className="text-xs text-fg-tertiary">Active customers</p>
                  <p className="mt-1 text-sm font-semibold text-fg">2,847</p>
                </div>
                <div className="rounded-xl border border-border bg-surface-inset px-3.5 py-3">
                  <p className="text-xs text-fg-tertiary">Net revenue churn</p>
                  <p className="mt-1 text-sm font-semibold text-fg">0.8%</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}