Split Card

import type { ComponentProps } from "react"
import { cn } from "cn"

import {
  SplitCard,
  SplitCardActions,
  SplitCardContent,
  SplitCardDescription,
  SplitCardHeader,
  SplitCardMedia,
  SplitCardTitle,
} from "@/components/card/split-card"
import {
  Section,
  SectionContent,
} from "@/components/editorial/section"
import {
  Poster,
  PosterDescription,
  PosterFootnote,
  PosterLabel,
  PosterTitle,
} from "@/components/poster/poster"
import { buttonVariants } from "@/components/ui/button"

const COPY = {
  title: "The economics of delivering on a system",
  body: "A study of build time, review cycles and coherence across fifty launches.",
  cta: "Download",
  label: "01orbital.",
  posterTitle: "The economics of delivering on a system",
  posterBody: "Cost savings and coherence with the kit",
  footnote: "A study of fifty launches, 2026",
} as const

// report-download-01's art, copied here so the demo matches the block.
function OrbitRings({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      aria-hidden="true"
      className={cn(
        "pointer-events-none absolute inset-0 before:absolute before:top-[22%] before:left-[8%] before:size-44 before:rounded-full before:border before:border-foreground/25 after:absolute after:right-[6%] after:bottom-[10%] after:size-64 after:rounded-full after:border after:border-dashed after:border-foreground/25",
        className
      )}
      {...props}
    />
  )
}

function OrbitMark({ className, ...props }: ComponentProps<"span">) {
  return (
    <span
      aria-hidden="true"
      className={cn(
        "flex items-center gap-2 text-current before:size-8 before:rounded-full before:border before:border-current/80 after:size-12 after:rounded-full after:border after:border-current/80",
        className
      )}
      {...props}
    >
      <span className="w-10 border-t border-dashed border-current/80" />
    </span>
  )
}

export default function SplitCardDemo() {
  return (
    <Section>
      <SectionContent className="items-center">
        <SplitCard className="w-full max-w-5xl dark:surface-sheen">
          <SplitCardContent>
            <SplitCardHeader>
              <SplitCardTitle>{COPY.title}</SplitCardTitle>
              <SplitCardDescription>{COPY.body}</SplitCardDescription>
            </SplitCardHeader>
            <SplitCardActions>
              <a
                href="#"
                data-slot="button"
                className={cn(
                  buttonVariants({ variant: "secondary", size: "lg" })
                )}
              >
                {COPY.cta}
              </a>
            </SplitCardActions>
          </SplitCardContent>
          <SplitCardMedia divider={false}>
            <OrbitRings />
            <Poster className="dark rotate-3 text-shadow-legible">
              <img
                src="https://01orbital.dev/art/kit/layered-currents-415686.png"
                alt=""
                loading="lazy"
              />
              <PosterLabel>{COPY.label}</PosterLabel>
              <PosterTitle>{COPY.posterTitle}</PosterTitle>
              <PosterDescription>{COPY.posterBody}</PosterDescription>
              <OrbitMark className="mt-8" />
              <PosterFootnote>{COPY.footnote}</PosterFootnote>
            </Poster>
          </SplitCardMedia>
        </SplitCard>
      </SectionContent>
    </Section>
  )
}

SplitCard
├─ SplitCardContent
│  ├─ SplitCardHeader
│  │  ├─ SplitCardTitle
│  │  └─ SplitCardDescription
│  └─ SplitCardActions
└─ SplitCardMedia