Editorial colophon

import Link from 'next/link'
import { Container } from '@/components/ui/layout'

/**
 * Editorial footer
 *
 * A colophon: what the publication is, who makes it, and how it is set. The
 * masthead-style column of contributors is the point — publications are made
 * by people, and saying so is part of the form.
 */
const sections = [
  { label: 'Systems', href: '/starters/blog/preview/categories/systems' },
  { label: 'Craft', href: '/starters/blog/preview/categories/craft' },
  { label: 'Interviews', href: '/starters/blog/preview/categories/interviews' },
  { label: 'Field notes', href: '/starters/blog/preview/categories/field-notes' },
]

const contributors = [
  { role: 'Editor', name: 'Sofia Delgado' },
  { role: 'Design', name: 'Elena Rossi' },
  { role: 'Engineering', name: 'Amara Osei' },
  { role: 'Copy', name: 'Marcus Bell' },
]

export default function EditorialFooter() {
  return (
    <footer className="border-t border-line bg-canvas">
      <Container className="py-14">
        <p className="display-type text-2xl font-semibold text-ink-strong">The Quarterly</p>
        <p className="mt-3 max-w-xl text-sm leading-relaxed text-ink-muted">
          Four issues a year on design systems, craft and the people who maintain them. Set in a
          Palatino-family serif and a system grotesque, on a four-pixel grid.
        </p>

        <div className="mt-10 grid gap-8 border-t border-line pt-8 sm:grid-cols-2 lg:grid-cols-3">
          <nav aria-label="Sections">
            <h2 className="label-caps mb-3 text-ink-subtle">Sections</h2>
            <ul className="flex flex-col gap-2">
              {sections.map((section) => (
                <li key={section.href}>
                  <Link
                    href={section.href}
                    className="text-sm text-ink-muted transition-colors hover:text-accent"
                  >
                    {section.label}
                  </Link>
                </li>
              ))}
            </ul>
          </nav>

          <div>
            <h2 className="label-caps mb-3 text-ink-subtle">Masthead</h2>
            <dl className="flex flex-col gap-2">
              {contributors.map((person) => (
                <div
                  key={person.role}
                  className="flex items-baseline justify-between gap-4 sm:justify-start sm:gap-3"
                >
                  <dt className="text-xs text-ink-subtle">{person.role}</dt>
                  <dd className="text-sm text-ink">{person.name}</dd>
                </div>
              ))}
            </dl>
          </div>

          <div>
            <h2 className="label-caps mb-3 text-ink-subtle">Archive</h2>
            <ul className="flex flex-col gap-2">
              <li>
                <Link
                  href="/starters/blog/preview/stories"
                  className="text-sm text-ink-muted hover:text-accent"
                >
                  All stories
                </Link>
              </li>
              <li>
                <Link
                  href="/starters/blog/preview/about"
                  className="text-sm text-ink-muted hover:text-accent"
                >
                  About the publication
                </Link>
              </li>
              <li>
                <Link href="/search" className="text-sm text-ink-muted hover:text-accent">
                  Search the archive
                </Link>
              </li>
            </ul>
          </div>
        </div>

        <p className="mt-10 border-t border-line pt-6 text-xs text-ink-subtle">
          Issue 14 · March 2026 · A fictional publication built with Foundry.
        </p>
      </Container>
    </footer>
  )
}