---
import { getEmDashCollection, getSiteSettings } from "emdash";
import Base from "../layouts/Base.astro";
import ProjectCard from "../components/ProjectCard.astro";

const settings = await getSiteSettings();
const { entries: projects, cacheHint } =
	await getEmDashCollection("projects");

Astro.cache.set(cacheHint);

// Get the 4 most recent projects for the homepage
const featuredProjects = projects
	.toSorted((a, b) => {
		const dateA = a.data.publishedAt?.getTime() ?? 0;
		const dateB = b.data.publishedAt?.getTime() ?? 0;
		return dateB - dateA;
	})
	.slice(0, 4);
---

<Base>
	<section class="hero">
		<h1 class="hero-title">{settings?.title || "Studio"}</h1>
		<p class="hero-tagline">{settings?.tagline || "Design & Development"}</p>
	</section>

	{
		featuredProjects.length > 0 ? (
			<section class="featured">
				<header class="section-header">
					<h2 class="section-title">Selected Work</h2>
					<a href="/work" class="section-link">
						View all projects &rarr;
					</a>
				</header>
				<div class="projects-grid">
					{featuredProjects.map((project) => (
						<ProjectCard
							title={project.data.title ?? "Untitled"}
							summary={project.data.summary}
							featuredImage={project.data.featured_image ?? ""}
							href={`/work/${project.id}`}
							client={project.data.client}
							year={project.data.year}
						/>
					))}
				</div>
			</section>
		) : (
			<section class="empty-state">
				<h2>No projects yet</h2>
				<p>Add your first project in the admin panel.</p>
				<a href="/_emdash/admin/content/projects/new" class="btn">
					Add a project
				</a>
			</section>
		)
	}
</Base>

<style>
	.hero {
		max-width: var(--wide-width);
		margin: 0 auto;
		padding: var(--spacing-4xl) var(--spacing-lg);
		text-align: center;
	}

	.hero-title {
		font-size: var(--font-size-4xl);
		font-weight: 500;
		margin-bottom: var(--spacing-md);
		letter-spacing: -0.02em;
	}

	.hero-tagline {
		font-size: var(--font-size-xl);
		color: var(--color-muted);
		font-family: var(--font-serif);
		font-style: italic;
	}

	.featured {
		max-width: var(--wide-width);
		margin: 0 auto;
		padding: 0 var(--spacing-lg) var(--spacing-4xl);
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		margin-bottom: var(--spacing-2xl);
		padding-bottom: var(--spacing-md);
		border-bottom: 1px solid var(--color-border);
	}

	.section-title {
		font-size: var(--font-size-lg);
		font-weight: 500;
	}

	.section-link {
		font-size: var(--font-size-sm);
		color: var(--color-muted);
		text-decoration: none;
		transition: color var(--transition-fast);
	}

	.section-link:hover {
		color: var(--color-text);
	}

	.projects-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--spacing-2xl);
	}

	.empty-state {
		text-align: center;
		padding: var(--spacing-4xl) var(--spacing-lg);
		max-width: 400px;
		margin: 0 auto;
	}

	.empty-state h2 {
		font-size: var(--font-size-xl);
		margin-bottom: var(--spacing-sm);
	}

	.empty-state p {
		color: var(--color-muted);
		margin-bottom: var(--spacing-lg);
	}

	.btn {
		display: inline-block;
		padding: var(--spacing-sm) var(--spacing-lg);
		background: var(--color-text);
		color: var(--color-bg);
		text-decoration: none;
		border-radius: var(--radius);
		font-size: var(--font-size-sm);
		transition: opacity var(--transition-fast);
	}

	.btn:hover {
		opacity: 0.85;
	}

	@media (max-width: 768px) {
		.hero {
			padding: var(--spacing-3xl) var(--spacing-lg);
		}

		.hero-title {
			font-size: var(--font-size-3xl);
		}

		.projects-grid {
			grid-template-columns: 1fr;
		}

		.section-header {
			flex-direction: column;
			gap: var(--spacing-sm);
			align-items: flex-start;
		}
	}
</style>