<?php
/**
 * Snippet: chapter/hero
 * Params: $page (current chapter page)
 */
$num = $page->chapter_number()->value();
$padded = str_pad($num, 2, '0', STR_PAD_LEFT);
$filterId = 'rough' . $num;
?>
<section class="chapter-hero">
  <div class="chapter-hero-bg" data-parallax="0.3"></div>
  <div class="chapter-hero-grain"></div>
  <div class="chapter-hero-content">
    <div class="chapter-numeral-frame">
      <svg class="ring" viewBox="0 0 280 280" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <filter id="<?= html($filterId) ?>">
            <feTurbulence type="fractalNoise" baseFrequency="0.03" numOctaves="2" seed="<?= $num + 3 ?>"/>
            <feDisplacementMap in="SourceGraphic" scale="6"/>
          </filter>
        </defs>
        <circle cx="140" cy="140" r="135" fill="none" stroke="#b91c1c" stroke-width="0.6" opacity="0.7" filter="url(#<?= html($filterId) ?>)"/>
        <circle cx="140" cy="140" r="118" fill="none" stroke="#b91c1c" stroke-width="0.4" opacity="0.4"/>
        <line x1="140" y1="5" x2="140" y2="20" stroke="#ef2b2b" stroke-width="1.2"/>
        <line x1="140" y1="260" x2="140" y2="275" stroke="#b91c1c" stroke-width="0.8" opacity="0.5"/>
        <line x1="5" y1="140" x2="20" y2="140" stroke="#b91c1c" stroke-width="0.8" opacity="0.5"/>
        <line x1="260" y1="140" x2="275" y2="140" stroke="#b91c1c" stroke-width="0.8" opacity="0.5"/>
      </svg>
      <span class="chapter-numeral"><?= $page->chapter_numeral()->html() ?></span>
    </div>

    <div class="chapter-kicker">
      Chapter <span class="accent"><?= html($padded) ?></span> · <?= $site->title()->html() ?>
    </div>

    <h1 class="chapter-title" data-typewriter><?= $page->title()->html() ?></h1>

    <div class="chapter-meta">
      <?php if ($page->read_time()->isNotEmpty()): ?>
      <span><?= $page->read_time()->html() ?></span>
      <?php endif ?>
      <?php if ($page->location()->isNotEmpty()): ?>
      <span class="dot">●</span>
      <span><?= $page->location()->html() ?></span>
      <?php endif ?>
      <?php if ($page->chapter_time()->isNotEmpty()): ?>
      <span class="dot">●</span>
      <span><?= $page->chapter_time()->html() ?></span>
      <?php endif ?>
    </div>
  </div>

  <div class="scroll-cue"><?= $page->scroll_cue()->or('Scroll to descend')->html() ?></div>
</section>
