Contact wordmark 01

---
/**
 * Contact wordmark 01: A heading, a line and a round brand-colour button over a rule, a company blurb beside a small link grid, then a giant lowercase wordmark and the copyright. Always dark.
 *
 * @block footers
 * @order 59
 */
import { ArrowRight } from '@lucide/astro'
import Section from '@/components/apogee/Section/Section.astro'
import Heading from '@/components/apogee/Heading/Heading.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 {
  /** The small line opposite the copyright. @category content */
  credit?: string | null
}

const {
  brand = 'alkane labs',
  tagline = 'Alkane Labs builds instruments and runs services that speed up materials discovery for carbon capture and gas separation.',
  heading = 'Speed up your materials research',
  description = 'We can help. Tell us what you want to measure in our contact form.',
  primaryAction = { label: 'Contact us', href: '#' },
  columns = [{ heading: 'Footer', links: [{ label: 'Home', href: '#' }, { label: 'Careers', href: '#' }, { label: 'About us', href: '#' }, { label: 'Contact', href: '#' }, { label: 'Solutions', href: '#' }, { label: 'Updates', href: '#' }] }],
  copyright = '© 2026 Alkane Labs, Inc. All rights reserved.',
  credit = 'Made with care',
} = Astro.props
const flat = columns.flatMap((c) => c.links)
---

<Section as="footer" spacing="medium" containerWidth="full" theme="dark" class="bg-neutral-faded">
  <div class="flex flex-col items-start gap-4 border-b border-neutral-faded pb-40">
    {heading && <Heading as="h2" size="h1" class="max-w-xl text-balance">{plain(heading)}</Heading>}
    {description && <p class="max-w-sm">{description}</p>}
    {primaryAction && <Button href={primaryAction.href} rounded>{primaryAction.label}<ArrowRight slot="end" class="rtl:-scale-x-100" aria-hidden="true" /></Button>}
  </div>

  <div class="mt-40 grid gap-10 md:grid-cols-[1fr_auto]">
    {tagline && <p class="max-w-xl text-xl">{plain(tagline)}</p>}
    <ul class="grid list-none grid-cols-3 gap-x-8 gap-y-3 p-0">{flat.map((l) => <li><Link href={l.href} color="neutral" underline="hover">{l.label}</Link></li>)}</ul>
  </div>

  <p class="mt-24 pb-[0.15em] text-center text-[clamp(4rem,0.5rem+14vw,14rem)] leading-[0.8] tracking-tight" aria-hidden="true">{brand}</p>
  <div class="mt-16 flex flex-wrap justify-between gap-4 text-sm">
    {copyright && <p>{copyright}</p>}
    {credit && <p class="text-neutral-faded">{credit}</p>}
  </div>
</Section>