Large 14 brand

---
/**
 * Large 14 brand: The logo beside three link columns, then a short call to action beside the copyright, on the brand colour.
 *
 * @block footers
 * @order 34
 */
import { Orbit } from '@lucide/astro'
import Section from '@/components/apogee/Section/Section.astro'
import FeaturedIcon from '@/components/apogee/FeaturedIcon/FeaturedIcon.astro'
import Link from '@/components/apogee/Link/Link.astro'
import Badge from '@/components/apogee/Badge/Badge.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 = 'Move faster with Example',
  description = 'Save hours on every page and ship a site that looks right on day one.',
  columns = [
    { heading: 'Product', links: [{ label: 'Overview', href: '#' }, { label: 'Features', href: '#' }, { label: 'Solutions', href: '#', badge: 'New' }, { label: 'Tutorials', href: '#' }, { label: 'Pricing', href: '#' }, { label: 'Releases', href: '#' }] },
    { heading: 'Company', links: [{ label: 'About us', href: '#' }, { label: 'Careers', href: '#' }, { label: 'Press', href: '#' }, { label: 'News', href: '#' }, { label: 'Media kit', href: '#' }, { label: 'Contact', href: '#' }] },
    { heading: 'Resources', links: [{ label: 'Blog', href: '#' }, { label: 'Newsletter', href: '#' }, { label: 'Events', href: '#' }, { label: 'Help centre', href: '#' }, { label: 'Tutorials', href: '#' }, { label: 'Support', href: '#' }] },
  ],
  copyright = '© 2026 Example. All rights reserved.',
} = Astro.props
---

<Section as="footer" spacing="medium" background="primary">
  <div class="grid gap-12 lg:gap-16 lg:grid-cols-2">
    <Link href="/" color="inherit" underline="none" class="inline-flex items-center gap-2 text-lg font-semibold self-start"><FeaturedIcon theme="solid" color="neutral" size="small"><Orbit /></FeaturedIcon>{brand}</Link>
    <div class="grid grid-cols-2 gap-8 sm:grid-cols-3">
      {columns.map((c) => (
        <nav aria-label={c.heading}>
          <p class="text-sm font-semibold opacity-85">{c.heading}</p>
          <ul class="mt-4 flex list-none flex-col gap-3 p-0">
            {c.links.map((l) => (
              <li class="flex items-center gap-2">
                <Link href={l.href} color="inherit" underline="hover" class="font-semibold">{l.label}</Link>
                {l.badge && <Badge size="small" variant="outline" color="neutral" class="border-current! bg-transparent! text-inherit!">{l.badge}</Badge>}
              </li>
            ))}
          </ul>
        </nav>
      ))}
    </div>
  </div>
  <div class="mt-12 flex flex-col gap-6 border-t border-current/25 pt-8 md:mt-16 md:flex-row md:items-end md:justify-between">
    <div class="flex max-w-md flex-col gap-1">
      {heading && <p class="font-semibold">{plain(heading)}</p>}
      {description && <p class="opacity-85">{description}</p>}
    </div>
    {copyright && <p class="opacity-85 ">{copyright}</p>}
  </div>
</Section>