Large 11 brand

---
/**
 * Large 11 brand: A centred call to action, the logo and a row of links beside app buttons, then copyright and social links, on the brand colour.
 *
 * @block footers
 * @order 31
 */
import { CirclePlay, Download, Orbit, Smartphone } 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, type Action } from '@/components/apogee/sections/_shared/spine.ts'
import { socialIcons, type FooterContent } from '@/components/apogee/sections/_shared/footers.ts'

/** @composable */
interface Props extends FooterContent {
  /** The label over the app buttons. @category content */
  appsLabel?: string | null
  /** App store buttons; icons cycle phone, download. @category content */
  apps?: Action[] | null
}

const appIcons = [Smartphone, Download]

const {
  brand = 'Example',
  tagline = 'Design calm, accessible websites your whole team can edit.',
  heading = 'No long-term contracts. No catches.',
  description = 'Start your 30-day free trial. Cancel any time.',
  primaryAction = { label: 'Get started', href: '#' },
  secondaryAction = { label: 'View demo', href: '#' },
  columns = [{ heading: 'Footer', links: [{ label: 'Overview', href: '#' }, { label: 'Features', href: '#' }, { label: 'Pricing', href: '#' }, { label: 'Careers', href: '#' }, { label: 'Help', href: '#' }, { label: 'Privacy', href: '#' }] }],
  navLabel = 'Footer',
  copyright = '© 2026 Example. All rights reserved.',
  social = [
    { label: 'Email', href: '#', icon: 'mail' },
    { label: 'Blog feed', href: '#', icon: 'rss' },
    { label: 'Community', href: '#', icon: 'message' },
    { label: 'Website', href: '#', icon: 'globe' },
    { label: 'Contact', href: '#', icon: 'at-sign' },
  ],
  appsLabel = 'Get the app',
  apps = [{ label: 'Download for iOS', href: '#' }, { label: 'Get it on Android', href: '#' }],
} = Astro.props
const flat = columns.flatMap((c) => c.links)
---

<Section as="footer" spacing="medium" background="primary">
  <div class="flex flex-col items-center gap-8 border-b border-current/25 pb-12 md:pb-16">
    <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 opacity-85">{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" class="border-current! bg-transparent! text-inherit! shadow-none!"><CirclePlay slot="start" aria-hidden="true" />{secondaryAction.label}</Button>}
      {primaryAction && <Button href={primaryAction.href} size="large" color="neutral">{primaryAction.label}</Button>}
    </div>
    )}
  </div>
  <div class="mt-12 flex flex-col gap-12 md:mt-16 md:flex-row md:justify-between">
    <div class="flex flex-col gap-6">
      <Link href="/" color="inherit" underline="none" class="inline-flex items-center gap-2 text-lg font-semibold "><FeaturedIcon theme="solid" color="neutral" size="small"><Orbit /></FeaturedIcon>{brand}</Link>
      {tagline && <p class="max-w-xs opacity-85">{plain(tagline)}</p>}
      {flat.length > 0 && <nav aria-label={navLabel} class="mt-2"><ul class="grid list-none grid-cols-2 gap-x-8 gap-y-3 p-0 sm:flex sm:flex-wrap">{flat.map((l) => <li><Link href={l.href} color="inherit" underline="hover" class="font-semibold">{l.label}</Link></li>)}</ul></nav>}
    </div>
    <div class="flex flex-col gap-4">
      {appsLabel && <p class="text-sm font-semibold opacity-85">{appsLabel}</p>}
      {apps && <div class="flex flex-col gap-3">{apps.map((a, i) => { const Icon = appIcons[i % appIcons.length]!; return <Button href={a.href} variant="outline" color="neutral" class="border-current! bg-transparent! text-inherit! shadow-none!"><Icon slot="start" aria-hidden="true" />{a.label}</Button> })}</div>}
    </div>
  </div>
  <div class="mt-12 md:mt-16 flex flex-col-reverse gap-6 border-t border-current/25 pt-8 md:flex-row md:items-center md:justify-between">
    {copyright && <p class="opacity-85 ">{copyright}</p>}
    {social && <ul class="flex list-none flex-wrap gap-6 p-0 opacity-85">{social.map((s) => { const Icon = socialIcons[s.icon]; return <li><Link href={s.href} color="inherit" underline="none" aria-label={s.label} class="flex"><Icon class="size-6" aria-hidden="true" /></Link></li> })}</ul>}
  </div>
</Section>