Split image quote 01

---
/**
 * Split image quote 01: A heading, three checks and two buttons beside a sliding testimonial.
 *
 * @block cta
 * @order 9
 */
import { Check } from '@lucide/astro'
import Section from '@/components/apogee/Section/Section.astro'
import SectionHeader from '@/components/apogee/SectionHeader/SectionHeader.astro'
import Button from '@/components/apogee/Button/Button.astro'
import Image from '@/components/apogee/Image/Image.astro'
import Carousel from '@/components/apogee/Carousel/Carousel.astro'
import Rating from '@/components/apogee/Rating/Rating.astro'
import { plain, type Media } from '@/components/apogee/sections/_shared/spine.ts'
import type { CTAContent } from '@/components/apogee/sections/_shared/cta.ts'

type Testimonial = { quote: string; name: string; role: string; company: string; image: Media }

/** @composable */
interface Props extends CTAContent {
  /** The checked lines under the description. @category content */
  features?: string[] | null
  /** The slides of the testimonial carousel. @category content */
  testimonials?: Testimonial[] | null
}

const {
  eyebrow,
  heading = 'Join 4,000+ startups growing with us',
  description = 'Start your 30-day free trial today.',
  primaryAction = { label: 'Get started', href: '#' },
  secondaryAction = { label: 'Learn more', href: '#' },
  features = ['30-day free trial', 'Personalised onboarding', 'Access to all features'],
  testimonials = [
    { quote: 'We shipped our redesign in half the time, and the reviews are about the product now, not the buttons.', name: 'Ada Lovelace', role: 'Design Lead', company: 'Northpeak', image: { src: 'https://picsum.photos/seed/apogee-cta-q1/1200/1400', alt: '', width: 1200, height: 1400 } },
    { quote: 'The team finally speaks one language. New people ship on their first day.', name: 'Alan Turing', role: 'Engineering Manager', company: 'Quanta', image: { src: 'https://picsum.photos/seed/apogee-cta-q2/1200/1400', alt: '', width: 1200, height: 1400 } },
    { quote: 'Accessibility stopped being an audit at the end. It is in every part we use.', name: 'Grace Hopper', role: 'Product Manager', company: 'Fieldwork', image: { src: 'https://picsum.photos/seed/apogee-cta-q3/1200/1400', alt: '', width: 1200, height: 1400 } },
  ],
} = Astro.props

---

<Section spacing="large">
  <div class="grid items-center gap-12 lg:grid-cols-2 lg:gap-16">
    <div class="flex flex-col justify-center gap-8">
      <SectionHeader eyebrow={eyebrow ?? undefined} heading={plain(heading)} description={description ?? undefined} />
      {features && (
      <ul class="flex list-none flex-col gap-4 p-0">
      {features.map((c) => (
        <li class="flex items-center gap-3"><span class="grid size-7 shrink-0 place-items-center rounded-full bg-positive-faded text-positive"><Check class="size-4" aria-hidden="true" /></span>{c}</li>
      ))}
    </ul>
      )}
      {(primaryAction || secondaryAction) && (
      <div class="flex flex-col-reverse gap-3 sm:flex-row ">
      {secondaryAction && <Button href={secondaryAction.href} size="large" variant="outline" color="neutral">{secondaryAction.label}</Button>}
      {primaryAction && <Button href={primaryAction.href} size="large">{primaryAction.label}</Button>}
    </div>
      )}
    </div>
    {testimonials && (
    <Carousel label="What customers say" visibleItems={1} controlsVariant="overlay" class="min-w-0">
      {testimonials.map((r) => (
        <figure class="relative m-0 overflow-hidden rounded-2xl">
          <Image src={r.image.src} alt={r.image.alt} width={r.image.width} height={r.image.height} fit="cover" class="aspect-[6/7] w-full" />
          <figcaption class="absolute inset-x-0 bottom-0 flex flex-col gap-4 bg-inverted/40 p-6 text-on-inverted backdrop-blur-md md:p-8">
            <Rating value={5} readonly aria-label="Rated 5 out of 5" />
            <blockquote class="m-0 text-xl font-semibold text-balance md:text-2xl">“{r.quote}”</blockquote>
            <p><span class="font-semibold">{r.name}</span><br /><span class="text-sm">{r.role}, {r.company}</span></p>
          </figcaption>
        </figure>
      ))}
    </Carousel>
    )}
  </div>
</Section>