Editorial contents index

import Link from 'next/link'
import { Container } from '@/components/ui/layout'
import { formatDate } from '@/lib/format'
import { posts } from '@/content/demo'

/**
 * Editorial index
 *
 * No cards, no images: a numbered index set in the display serif. Reads as a
 * table of contents, which is the right register for a publication where the
 * writing is the product.
 */
export default function EditorialIndexBlog() {
  return (
    <section className="border-b border-line bg-canvas py-section">
      <Container size="narrow">
        <div className="border-t-2 border-ink pt-6">
          <p className="label-caps text-ink-subtle">In this issue</p>
          <h2 className="display-type mt-4 text-3xl font-semibold text-ink-strong sm:text-4xl">
            Contents
          </h2>
        </div>

        <ol className="mt-10 divide-y divide-[var(--color-border)]">
          {posts.map((post, index) => (
            <li key={post.slug}>
              <Link
                href={`/starters/blog/preview/stories/${post.slug}`}
                className="group grid gap-x-6 py-6 sm:grid-cols-[auto_1fr]"
              >
                <span className="display-type text-lg font-semibold text-ink-subtle tabular-nums">
                  {String(index + 1).padStart(2, '0')}
                </span>
                <div className="min-w-0">
                  <h3 className="display-type text-xl leading-snug font-semibold text-ink-strong group-hover:text-accent">
                    {post.title}
                  </h3>
                  <p className="mt-2 text-sm leading-relaxed text-ink-muted">{post.excerpt}</p>
                  <p className="mt-3 flex flex-wrap items-center gap-x-3 text-xs text-ink-subtle">
                    <span>{post.author}</span>
                    <time dateTime={post.date}>{formatDate(post.date)}</time>
                    <span>{post.readingTime}</span>
                  </p>
                </div>
              </Link>
            </li>
          ))}
        </ol>
      </Container>
    </section>
  )
}

/** Small formatting helpers shared across catalogue and starter surfaces. */

export function titleCase(value: string): string {
  return value
    .split(/[-_\s]+/)
    .filter(Boolean)
    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
    .join(' ')
}

export function pluralise(count: number, singular: string, plural = `${singular}s`): string {
  return `${count} ${count === 1 ? singular : plural}`
}

const currencyFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 2,
})

export function formatCurrency(cents: number): string {
  return currencyFormatter.format(cents / 100)
}

const compactFormatter = new Intl.NumberFormat('en-US', {
  notation: 'compact',
  maximumFractionDigits: 1,
})

export function formatCompact(value: number): string {
  return compactFormatter.format(value)
}

/**
 * Dates in Foundry are authored as ISO date strings so that server and client
 * renders agree byte-for-byte. Formatting is pinned to `en-US` + UTC for the
 * same reason — no hydration drift from the visitor's locale or timezone.
 */
export function formatDate(iso: string): string {
  const date = new Date(`${iso}T00:00:00Z`)
  if (Number.isNaN(date.getTime())) return iso
  return new Intl.DateTimeFormat('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    timeZone: 'UTC',
  }).format(date)
}

export function formatShortDate(iso: string): string {
  const date = new Date(`${iso}T00:00:00Z`)
  if (Number.isNaN(date.getTime())) return iso
  return new Intl.DateTimeFormat('en-US', {
    month: 'short',
    day: 'numeric',
    year: 'numeric',
    timeZone: 'UTC',
  }).format(date)
}

export function initials(name: string): string {
  const parts = name.trim().split(/\s+/).filter(Boolean)
  if (parts.length === 0) return '?'
  if (parts.length === 1) return (parts[0] ?? '?').slice(0, 2).toUpperCase()
  return `${(parts[0] ?? '')[0] ?? ''}${(parts[parts.length - 1] ?? '')[0] ?? ''}`.toUpperCase()
}

export function slugify(value: string): string {
  return value
    .toLowerCase()
    .normalize('NFKD')
    .replace(/[^\w\s-]/g, '')
    .trim()
    .replace(/[\s_]+/g, '-')
    .replace(/-+/g, '-')
}