---
/**
 * eratic.ro — the front door.
 *
 * Three rooms, each with its most recent few things, and nothing else. The
 * point of a home page like this is to be a doorway, not a destination: it
 * should tell you what is here and get out of the way.
 */
import Base from '@eratic/core/layouts/Base.astro';
import { SITES, IDENTITY, formatDateShort, isoDate } from '@eratic/core';
import { latestFromBlog, latestFromFav, latestFromIo } from '../lib/latest';

const [blog, fav, io] = await Promise.all([latestFromBlog(4), latestFromFav(4), latestFromIo(3)]);

// Only sections marked `listed` in packages/core/src/config.ts appear here.
// fav and io are built and live, but not advertised until they have something
// in them worth sending people to.
const sections = [
	{ def: SITES.blog, blurb: 'Essays and photographs.', items: blog },
	{ def: SITES.fav, blurb: 'Objects, books, films, music, with notes.', items: fav },
	{ def: SITES.io, blurb: 'What came in this week.', items: io },
].filter((section) => section.def.listed);
---

<Base site="home" path="/">
	<header class="hero">
		<h1>eratic</h1>
		<p class="hero__text">{IDENTITY.tagline}</p>
		<p class="hero__note meta">
			A place instead of a profile. No analytics, no cookies, no third-party
			requests. Every section has a feed.
		</p>
	</header>

	<div class="rooms" style={`--rooms: ${sections.length}`}>
		{
			sections.map(({ def, blurb, items }) => (
				<section class="room">
					<header class="room__header">
						<h2>
							<a href={def.url}>{def.label}</a>
						</h2>
						<p class="meta">{blurb}</p>
						{def.feeds && (
							<p class="meta room__feed">
								<a href={`${def.url}/rss.xml`}>RSS</a>
								{' · '}
								<a href={`${def.url}/feed.json`}>JSON</a>
							</p>
						)}
					</header>

					{items.length === 0 ? (
						<p class="meta">Nothing here yet.</p>
					) : (
						<ul>
							{items.map((item) => (
								<li>
									<a href={item.href}>{item.title}</a>
									<p class="meta room__meta">
										{item.kicker && <span>{item.kicker}</span>}
										<time datetime={isoDate(item.pubDate)}>
											{formatDateShort(item.pubDate)}
										</time>
									</p>
								</li>
							))}
						</ul>
					)}
				</section>
			))
		}
	</div>
</Base>

<style>
	.hero {
		grid-column: wide;
		margin-block: var(--space-2xl) var(--space-3xl);
		display: flex;
		flex-direction: column;
		gap: var(--space-xs);
		max-inline-size: var(--measure-wide);
	}

	.hero h1 {
		font-family: var(--font-prose);
		font-size: var(--step-5);
		font-weight: 600;
		line-height: 1;
		letter-spacing: -0.028em;
		font-optical-sizing: auto;
	}

	.hero__text {
		font-family: var(--font-prose);
		font-size: var(--step-2);
		line-height: 1.35;
		color: var(--ink);
		text-wrap: pretty;
		max-inline-size: 24ch;
	}

	.hero__note {
		max-inline-size: var(--measure);
		text-wrap: pretty;
	}

	.rooms {
		grid-column: wide;
		display: grid;
		/* One column per listed section, so hiding a section widens the rest
		   instead of leaving a hole where it used to be. */
		grid-template-columns: repeat(var(--rooms, 3), minmax(0, 1fr));
		gap: var(--space-xl);
	}

	/* On its own, a single section should read as a list rather than a narrow
	   column stranded on the left. */
	.rooms:has(> :only-child) {
		max-inline-size: var(--measure);
	}

	/* Three columns is a desktop luxury. Below that they stack, which is also
	   the reading order, so nothing needs reordering. */
	@media (width < 52rem) {
		.rooms {
			grid-template-columns: 1fr;
			gap: var(--space-2xl);
		}
	}

	.room {
		display: flex;
		flex-direction: column;
		gap: var(--space-m);
	}

	.room__header {
		display: flex;
		flex-direction: column;
		gap: var(--space-3xs);
		padding-block-end: var(--space-2xs);
		border-block-end: 1px solid var(--rule);
	}

	.room h2 {
		font-family: var(--font-prose);
		font-size: var(--step-2);
		font-weight: 600;
		letter-spacing: -0.016em;
		line-height: var(--leading-tight);
	}

	.room h2 a {
		color: var(--ink);
		text-decoration: none;
	}

	.room h2 a:hover {
		color: var(--accent);
	}

	.room__feed {
		font-family: var(--font-mono);
		font-size: var(--step--2);
	}

	.room ul {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: var(--space-m);
	}

	.room li > a {
		font-family: var(--font-prose);
		font-size: var(--step-0);
		line-height: var(--leading-tight);
		color: var(--ink);
		text-decoration: none;
		text-wrap: pretty;
	}

	.room li > a:hover {
		color: var(--accent);
	}

	.room__meta {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2xs);
		margin-block-start: var(--space-3xs);
		font-size: var(--step--2);
		color: var(--ink-faint);
	}

	.room__meta span::after {
		content: ' ·';
	}
</style>