<main class="home">
  <header class="hero">
    <div class="hero-decoration">
      <span class="bubble"></span>
      <span class="bubble"></span>
      <span class="bubble"></span>
    </div>
    <h1 class="wave-title">
      <span style="--i:1">D</span><span style="--i:2">e</span><span style="--i:3">e</span><span style="--i:4">p</span><span style="--i:5">&nbsp;</span><span style="--i:6">B</span><span style="--i:7">l</span><span style="--i:8">u</span><span style="--i:9">e</span><span style="--i:10">&nbsp;</span><span style="--i:11">B</span><span style="--i:12">l</span><span style="--i:13">o</span><span style="--i:14">g</span>
    </h1>
    <p class="tagline">Exploring the wonders of sea fish & crustaceans</p>
  </header>

  <section class="articles-grid">
    @for (article of articles(); track article.id) {
      <a [routerLink]="['/article', article.id]" class="article-card">
        <div class="card-image">
          @if (article.image) {
            <img [src]="article.image" [alt]="article.title" class="article-image" />
          } @else {
            <div class="image-placeholder">
              <span class="placeholder-icon">🐠</span>
              <span class="placeholder-text">Image coming soon</span>
            </div>
          }
        </div>
        <div class="card-content">
          <span class="article-id">#{{ article.id }}</span>
          <h2>{{ article.title }}</h2>
          <p>{{ article.excerpt }}</p>
          <span class="read-more">Dive deeper →</span>
        </div>
      </a>
    }
  </section>
</main>
