Large screen mockup 01

---
/**
 * Large screen mockup 01: A centred heading over a full-width screenshot cropped at the bottom edge.
 *
 * @block features
 * @order 25
 */
import Section from '@/components/apogee/Section/Section.astro'
import SectionHeader from '@/components/apogee/SectionHeader/SectionHeader.astro'
import DeviceFrame from '@/components/apogee/DeviceFrame/DeviceFrame.astro'
import { plain } from '@/components/apogee/sections/_shared/spine.ts'
import type { FeaturesContent } from '@/components/apogee/sections/_shared/features.ts'

/** @composable */
interface Props extends FeaturesContent {}

const {
  eyebrow = 'Features',
  heading = 'Your whole business at a glance',
  description = 'Powerful, self-serve product and growth analytics to help you convert, engage and retain more users. Trusted by over 4,000 startups.',
  media = { src: '/mockups/app-desktop-light.jpg', srcDark: '/mockups/app-desktop-dark.jpg', alt: 'The dashboard overview in a browser' },
} = Astro.props
---

<Section spacing="large" class="pb-0!">
  <SectionHeader eyebrow={eyebrow ?? undefined} heading={plain(heading)} description={description ?? undefined} align="center" class="mb-12 md:mb-16" />
  {media && <div class="max-h-105 overflow-hidden mask-b-from-70% md:max-h-140">
    <DeviceFrame device="browser" src={media.src} srcDark={media.srcDark} alt={media.alt} width={media.width} height={media.height} class="" />
  </div>}
</Section>