Screenshot Plate

import { Heading } from "@/components/editorial/heading"
import {
  Section,
  SectionContent,
  SectionDescription,
  SectionHeader,
  SectionTitleGroup,
} from "@/components/editorial/section"
import { ScreenshotImage } from "@/components/media/screenshot-frame"
import { ScreenshotPlate } from "@/components/media/screenshot-plate"

const COPY = {
  title: "Everything you need to answer well, in one place.",
  body: "Reply faster and keep every customer conversation where the whole team can see it: one inbox, one queue, one record.",
  alt: "The shared inbox, with a thread open and the suggested reply beside it.",
} as const

export default function ScreenshotPlateDemo() {
  return (
    <Section>
      <SectionHeader>
        <SectionTitleGroup>
          <Heading>{COPY.title}</Heading>
        </SectionTitleGroup>
        <SectionDescription>{COPY.body}</SectionDescription>
      </SectionHeader>
      <SectionContent>
        <ScreenshotPlate className="rounded-sm">
          <ScreenshotImage
            src="/screenshots/dashboard-light.webp"
            alt={COPY.alt}
            width={2880}
            height={1666}
            className="w-full dark:hidden"
          />
          <ScreenshotImage
            src="/screenshots/dashboard-dark.webp"
            alt={COPY.alt}
            width={2880}
            height={1666}
            className="w-full not-dark:hidden"
          />
        </ScreenshotPlate>
      </SectionContent>
    </Section>
  )
}