Brand contact 01

---
/**
 * Brand contact 01: A hexagon mark beside a big question, a line and a mono button on the brand colour, then a giant wordmark with a trademark sign, a rule, the company line and social squares.
 *
 * @block footers
 * @order 56
 */
import { Hexagon } 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 { socialIcons, type FooterContent } from '@/components/apogee/sections/_shared/footers.ts'

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

const {
  brand = 'Brickwell',
  heading = 'Have something worth shaping? Let’s build it properly.',
  description = 'Launching a product, growing a brand, trying out an AI idea or untangling a complex digital experience: we would love to hear what you are working on.',
  primaryAction = { label: 'Get in touch', href: '#' },
  copyright = '©Brickwell Ltd | Company number 0861008',
  social = [
    { label: 'Community', href: '#', icon: 'users' },
    { label: 'Photos', href: '#', icon: 'camera' },
    { label: 'Updates', href: '#', icon: 'at-sign' },
  ],
} = Astro.props
---

<Section as="footer" spacing="large" containerWidth="full" data-surface="primary" class="bg-page text-neutral">
  <div class="grid gap-12 md:grid-cols-2">
    <Hexagon class="size-20 rotate-90" stroke-width="5" aria-hidden="true" />
    <div class="flex flex-col items-start gap-6">
      {heading && <Heading as="h2" size="h1" class="text-balance">{plain(heading)}</Heading>}
      {description && <p class="max-w-xl text-lg">{description}</p>}
      {primaryAction && <Button href={primaryAction.href} size="large" class="font-mono uppercase tracking-[0.2em]">{primaryAction.label}</Button>}
    </div>
  </div>
  <p class="mt-20 flex items-start text-[clamp(4rem,0.5rem+14vw,15rem)] font-medium leading-[0.85] tracking-tighter" aria-hidden="true">{brand}<span class="mt-[0.1em] text-[0.25em] tracking-normal">™</span></p>
  <div class="mt-6 flex flex-wrap items-center justify-between gap-4 border-t border-neutral pt-4 font-mono text-sm tracking-wide">
    {copyright && <p>{copyright}</p>}
    {social && <ul class="flex list-none gap-3 p-0">{social.map((s) => { const Icon = socialIcons[s.icon]; return <li><Link href={s.href} color="inherit" underline="none" aria-label={s.label}><Icon class="size-5" aria-hidden="true" /></Link></li> })}</ul>}
  </div>
</Section>