---
import { sanitizeContentBody } from '../../lib/sanitize';

interface Props {
  siteName: string;
  heroHtml: string;
  posts: Array<{ slug: string; title: string; createdAt: string }>;
  modCards: Array<{ id: string; name: string; tagline: string; layer: string }>;
}

const { siteName, heroHtml, posts, modCards } = Astro.props;
---
<section class="hero">
  <h1>{siteName}</h1>
  <p class="hero__eyebrow">Content distribution</p>
  <div class="cms-body" set:html={sanitizeContentBody(heroHtml)} />
</section>

<style>
  .hero .hero__eyebrow {
    margin-top: 8px;
    margin-bottom: 0;
  }

  .home__empty {
    margin: 0;
    color: var(--mod-color-fg-muted);
    font-size: var(--mod-font-size-sm);
  }
</style>

<section class="section" id="modules">
  <h2>Modules</h2>
  <p class="section__lead">
    Five platform modules power this distribution — each with its own page and dependency graph.
  </p>
  <div class="card-grid">
    {
      modCards.map((mod) => (
        <a class="card" href={`/module/${mod.id}`}>
          <div class="card__name">{mod.name}</div>
          <p class="card__tagline">{mod.tagline}</p>
          <span class="card__layer">{mod.layer}</span>
        </a>
      ))
    }
  </div>
</section>

<section class="section">
  <h2>Blueprint</h2>
  <p class="section__lead">
    See how the CMS blueprint assembles presets, plugins, and modules into a complete product.
  </p>
  <div class="link-row">
    <a href="/blueprint/cms">CMS blueprint →</a>
    <a href="/ui-kit">UI Kit (coming soon)</a>
  </div>
</section>

{
  posts.length > 0 ? (
    <section class="section" id="latest">
      <h2>Latest</h2>
      <ul class="post-list">
        {posts.map((post) => (
          <li>
            <a href={`/post/${post.slug}`}>{post.title}</a>
          </li>
        ))}
      </ul>
    </section>
  ) : (
    <p class="home__empty">No posts yet.</p>
  )
}