<?php snippet('header') ?>

<main class="home">
  <!-- Hero Section -->
  <section class="hero">
    <div class="hero__content">
      <h1 class="hero__title">
        <?php
        $title = $page->hero_title()->value();
        $highlight = $page->hero_title_highlight()->value();
        if ($highlight) {
          echo str_replace($highlight, '<span class="highlight">' . $highlight . '</span>', $title);
        } else {
          echo $title;
        }
        ?>
      </h1>

      <?php if ($page->hero_subtitle()->isNotEmpty()): ?>
        <p class="hero__subtitle"><?= $page->hero_subtitle() ?></p>
      <?php endif ?>

      <?php if ($page->hero_cta_text()->isNotEmpty()): ?>
        <a href="<?= $page->hero_cta_link()->toPage()?->url() ?? '#' ?>" class="hero__cta btn">
          <?= $page->hero_cta_text() ?>
        </a>
      <?php endif ?>
    </div>

    <?php if ($hero = $page->hero_image()->toFile()): ?>
      <div class="hero__image">
        <img src="<?= $hero->url() ?>" alt="<?= $page->hero_title() ?>">
      </div>
    <?php endif ?>

    <!-- Floating Bubbles -->
    <?php if ($page->floating_bubbles()->isNotEmpty()): ?>
      <div class="hero__bubbles">
        <?php foreach ($page->floating_bubbles()->toStructure() as $bubble): ?>
          <div class="bubble bubble--<?= $bubble->position() ?>">
            <?= $bubble->text() ?>
          </div>
        <?php endforeach ?>
      </div>
    <?php endif ?>
  </section>
</main>

<?php snippet('footer') ?>
