Large 13

---
/**
 * Large 13: A centred mark, heading and two buttons, then copyright and legal links.
 *
 * @block footers
 * @order 13
 */
import { CirclePlay, Orbit } from '@lucide/astro'
import Section from '@/components/apogee/Section/Section.astro'
import Heading from '@/components/apogee/Heading/Heading.astro'
import FeaturedIcon from '@/components/apogee/FeaturedIcon/FeaturedIcon.astro'
import Button from '@/components/apogee/Button/Button.astro'
import Link from '@/components/apogee/Link/Link.astro'
import { plain } from '@/components/apogee/sections/_shared/spine.ts'
import { type FooterContent } from '@/components/apogee/sections/_shared/footers.ts'

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

const {
  brand = 'Example',
  heading = "Let's get started on something great",
  description = 'Join over 4,000 startups already growing with us.',
  primaryAction = { label: 'Get started', href: '#' },
  secondaryAction = { label: 'View demo', href: '#' },
  copyright = '© 2026 Example. All rights reserved.',
  legal = [{ label: 'Terms', href: '#' }, { label: 'Privacy', href: '#' }, { label: 'Cookies', href: '#' }],
} = Astro.props
---

<Section as="footer" spacing="large">
  <div class="flex flex-col items-center gap-8">
    <FeaturedIcon theme="solid" color="primary" size="large" label={brand}><Orbit /></FeaturedIcon>
    <div class="flex flex-col gap-3 items-center text-center">
      {heading && <Heading as="h2" size="h3">{plain(heading)}</Heading>}
      {description && <p class="text-lg text-neutral-faded">{description}</p>}
    </div>
    {(primaryAction || secondaryAction) && (
    <div class="flex flex-col-reverse gap-3 sm:flex-row">
      {secondaryAction && <Button href={secondaryAction.href} size="large" variant="outline" color="neutral"><CirclePlay slot="start" aria-hidden="true" />{secondaryAction.label}</Button>}
      {primaryAction && <Button href={primaryAction.href} size="large">{primaryAction.label}</Button>}
    </div>
    )}
  </div>
  <div class="mt-12 md:mt-16 flex flex-col-reverse gap-6 border-t border-neutral pt-8 md:flex-row md:items-center md:justify-between">
    {copyright && <p class="text-neutral-faded ">{copyright}</p>}
    {legal && <nav aria-label="Legal"><ul class="flex list-none flex-wrap gap-x-6 gap-y-2 p-0 text-neutral-faded">{legal.map((l) => <li><Link href={l.href} color="inherit" underline="hover">{l.label}</Link></li>)}</ul></nav>}
  </div>
</Section>