Faded wordmark 01

---
/**
 * Faded wordmark 01: Five link columns and two certification marks on a soft brand tint, an ask-an-assistant row and social icons, then the logo mark and wordmark huge and faded along the bottom.
 *
 * @block footers
 * @order 51
 */
import { Bot, Loader, MessageCircle, ShieldCheck, Sparkles } from '@lucide/astro'
import Section from '@/components/apogee/Section/Section.astro'
import Link from '@/components/apogee/Link/Link.astro'
import { socialIcons, type FooterContent } from '@/components/apogee/sections/_shared/footers.ts'

/** @composable */
interface Props extends FooterContent {
  /** Certification names, each in a round seal. @category content */
  certifications?: string[] | null
  /** The line over the assistant links. @category content */
  assistantPrompt?: string | null
}

const {
  brand = 'Clearview',
  columns = [
    { heading: 'Platform', links: [{ label: 'Overview', href: '#' }, { label: 'Security', href: '#' }, { label: 'Request a demo', href: '#' }] },
    { heading: 'Use cases', links: [{ label: 'Automation and workflows', href: '#' }, { label: 'Supplier management', href: '#' }, { label: 'Forecasts and budgets', href: '#' }, { label: 'Policy and approvals', href: '#' }, { label: 'Sustainability', href: '#' }, { label: 'Meetings', href: '#' }] },
    { heading: 'Industries', links: [{ label: 'Professional services', href: '#' }, { label: 'Technology', href: '#' }, { label: 'Life sciences', href: '#' }] },
    { heading: 'Resources', links: [{ label: 'Blog', href: '#' }, { label: 'White papers', href: '#' }, { label: 'Free tools', href: '#' }, { label: 'Webinars', href: '#' }] },
    { heading: 'Company', links: [{ label: 'About us', href: '#' }, { label: 'Community', href: '#' }, { label: 'Careers', href: '#' }, { label: 'Legal', href: '#' }] },
  ],
  copyright = '© 2026 Clearview. All rights reserved.',
  social = [
    { label: 'Community', href: '#', icon: 'users' },
    { label: 'Updates', href: '#', icon: 'at-sign' },
    { label: 'Videos', href: '#', icon: 'video' },
  ],
  certifications = ['ISO 27001', 'GDPR'],
  assistantPrompt = 'Ask an assistant to sum us up',
} = Astro.props
---

<Section as="footer" spacing="none" container={false} class="overflow-hidden" style="background: linear-gradient(to bottom, color-mix(in oklab, var(--background-primary) 6%, var(--background-page)), color-mix(in oklab, var(--background-primary) 14%, var(--background-page)))">
  <div class="mx-auto max-w-6xl px-gutter pt-(--spacing-section-lg)">
    <div class="grid grid-cols-2 gap-10 md:grid-cols-3 lg:grid-cols-[repeat(5,auto)_1fr]">
      {columns.map((c) => (
        <nav aria-label={c.heading}>
          <p class="text-sm text-neutral-faded">{c.heading}</p>
          <ul class="mt-3 flex list-none flex-col gap-3 p-0">{c.links.map((l) => <li><Link href={l.href} color="neutral" underline="hover">{l.label}</Link></li>)}</ul>
        </nav>
      ))}
      {certifications && <ul class="flex list-none gap-3 p-0 lg:justify-self-end" aria-label="Certifications">
        {certifications.map((c) => <li class="grid size-14 place-items-center rounded-full border-2 border-neutral text-center text-[0.5625rem] font-bold leading-tight"><ShieldCheck class="size-4" aria-hidden="true" />{c}</li>)}
      </ul>}
    </div>

    <div class="mt-16 flex flex-wrap items-end justify-between gap-6 border-t border-neutral-faded pt-8 text-sm text-neutral-faded">
      <div class="flex flex-col gap-3">
        {assistantPrompt && <p>{assistantPrompt}</p>}
        <ul class="flex list-none gap-3 p-0 text-neutral">{[Sparkles, Bot, MessageCircle, Loader].map((Icon, i) => <li><Link href="#" color="neutral" underline="none" aria-label={`Assistant ${i + 1}`}><Icon class="size-4" aria-hidden="true" /></Link></li>)}</ul>
      </div>
      <div class="flex flex-col items-end gap-3">
        {copyright && <p>{copyright}</p>}
        {social && <ul class="flex list-none gap-4 p-0 text-neutral">{social.map((s) => { const Icon = socialIcons[s.icon]; return <li><Link href={s.href} color="neutral" underline="none" aria-label={s.label}><Icon class="size-5" aria-hidden="true" /></Link></li> })}</ul>}
      </div>
    </div>

  </div>
  <div class="@container mt-16 px-gutter">
    <p class="flex items-center gap-[0.15em] whitespace-nowrap text-[18.3cqi] font-bold leading-[0.85] tracking-tight text-[color-mix(in_oklab,var(--background-primary)_22%,var(--background-page))] [margin-bottom:-0.12em]" aria-hidden="true"><Loader class="size-[0.9em] shrink-0" stroke-width="2.5" />{brand}</p>
  </div>
</Section>