Section simple 01

---
/**
 * Section simple 01: An icon, heading and intro beside body text.
 *
 * @block content
 * @order 16
 */
import { Zap } from '@lucide/astro'
import Section from '@/components/apogee/Section/Section.astro'
import SectionHeader from '@/components/apogee/SectionHeader/SectionHeader.astro'
import Prose from '@/components/apogee/Prose/Prose.astro'
import FeaturedIcon from '@/components/apogee/FeaturedIcon/FeaturedIcon.astro'
import { plain } from '@/components/apogee/sections/_shared/spine.ts'
import type { ContentContent } from '@/components/apogee/sections/_shared/content.ts'

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

const {
  eyebrow,
  heading = 'Beautiful analytics to grow smarter',
  description = 'Powerful, self-serve product and growth analytics to help you convert, engage and retain more users.',
} = Astro.props
---

<Section spacing="large">
  <div class="grid gap-12 lg:grid-cols-2 lg:gap-16">
    <div class="flex flex-col items-start gap-6">
      <FeaturedIcon theme="outline" color="neutral" size="large"><Zap /></FeaturedIcon>
      <SectionHeader eyebrow={eyebrow ?? undefined} heading={plain(heading)} description={description ?? undefined} />
    </div>
    <Prose>
      <h3>We share a single source of truth</h3>
      <p>Every number on every dashboard comes from the same definitions, written down once and checked on every change.</p>
      <p>Teams stop debating whose number is right and start asking what to do about it.</p>
    </Prose>
  </div>
</Section>