<?php

declare(strict_types=1);

require __DIR__ . '/includes/bootstrap.php';

function src(string $key, string $fallback = ''): string
{
    return e(url(setting($key, $fallback)));
}

function maybe_img(string $class, string $key, string $fallback = '', string $style = ''): void
{
    $path = setting($key, $fallback);
    if ($path === '') {
        return;
    }
    echo '<img class="' . e($class) . '" src="' . e(url($path)) . '" alt=""';
    if ($style !== '') {
        echo ' style="' . $style . '"';
    }
    echo ' />';
}

$nav = rows('nav_links');
$notes = rows('hero_notes');
$pills = rows('about_pills');
$stages = rows('stages');
$stats = rows('stats');
$opps = rows('opportunities');
$dirs = rows('directions');
$ideas = rows('ideas');
$orgs = rows('organizers');
$partners = rows('partners');
$socials = rows('socials');
$footerLinks = rows('footer_links');
?>
<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><?= e(setting('site_title')) ?></title>
    <meta name="description" content="<?= e(setting('site_description')) ?>" />
    <link rel="icon" href="<?= src('favicon', 'assets/IMG_3.png') ?>" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;800;900&family=Montserrat:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;600;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="<?= e(url('/css/style.css')) ?>" />
    <script>
      document.documentElement.classList.add("js");
    </script>
  </head>
  <body>
    <a class="skip-link" href="#main">К содержанию</a>

    <?php if (section_visible('nav')): ?>
    <header class="site-header">
      <div class="container header-inner">
        <a class="logo" href="<?= section_visible('hero') ? '#hero' : '#main' ?>" aria-label="<?= e(setting('site_title')) ?>">
          <img src="<?= src('logo', 'assets/IMG_3.png') ?>" alt="<?= e(setting('site_title')) ?>" />
        </a>

        <nav class="site-nav" id="site-nav" aria-label="Основная навигация">
          <?php foreach ($nav as $item): ?>
            <?php if (!public_href_visible((string) $item['href'])) continue; ?>
            <a href="<?= e($item['href']) ?>"><?= e($item['label']) ?></a>
          <?php endforeach; ?>
          <a class="btn btn-header" <?= apply_open_attrs() ?>>
            <img class="icon" src="<?= src('icon_spark', 'assets/IMG_1.svg') ?>" alt="" />
            <?= e(setting('header_cta', 'Принять участие')) ?>
            <img class="icon" src="<?= src('icon_arrow', 'assets/IMG_2.svg') ?>" alt="" />
          </a>
        </nav>

        <a class="btn btn-header header-cta" <?= apply_open_attrs() ?>>
          <img class="icon" src="<?= src('icon_spark', 'assets/IMG_1.svg') ?>" alt="" />
          <span class="cta-full"><?= e(setting('header_cta', 'Принять участие')) ?></span>
          <span class="cta-short"><?= e(setting('header_cta_short', 'Участие')) ?></span>
          <img class="icon icon-arrow" src="<?= src('icon_arrow', 'assets/IMG_2.svg') ?>" alt="" />
        </a>

        <button
          class="nav-toggle"
          type="button"
          aria-expanded="false"
          aria-controls="site-nav"
          aria-label="Открыть меню"
        >
          ☰
        </button>
      </div>
    </header>
    <?php endif; ?>

    <main id="main">
      <?php if (section_visible('hero')): ?>
      <section class="section hero" id="hero">
        <?php maybe_img('deco deco-hero-mid', 'deco_hero_mid', 'assets/IMG_4.png'); ?>
        <?php maybe_img('deco deco-hero-l', 'deco_hero_l', 'assets/IMG_7.png'); ?>
        <?php maybe_img('deco deco-hero-r', 'deco_hero_r', 'assets/IMG_9.png'); ?>

        <div class="container hero-grid">
          <div class="hero-copy">
            <div class="hero-badge">
              <span class="dot"></span>
              <span class="hero-badge-copy">
                <span class="hero-badge-label"><?= e(setting('hero_badge')) ?></span>
                <span class="season"><?= e(setting('hero_season')) ?></span>
              </span>
            </div>
            <div class="hero-kicker"><?= e(setting('hero_kicker')) ?></div>
            <h1><?= e(setting('hero_title')) ?> <span class="grad"><?= e(setting('hero_title_accent')) ?></span></h1>
            <p class="hero-text"><?= e(setting('hero_text')) ?></p>
            <div class="hero-actions">
              <a class="btn btn-gold" <?= apply_open_attrs() ?>>
                <img class="icon icon-ink" src="<?= src('icon_spark', 'assets/IMG_1.svg') ?>" alt="" />
                <?= e(setting('hero_btn_primary')) ?>
                <img class="icon icon-ink" src="<?= src('icon_arrow', 'assets/IMG_2.svg') ?>" alt="" />
              </a>
              <?php if (section_visible('about')): ?>
              <a class="btn btn-ghost" href="#about">
                <img class="icon" src="<?= src('icon_info', 'assets/IMG_8.svg') ?>" alt="" />
                <?= e(setting('hero_btn_secondary')) ?>
              </a>
              <?php endif; ?>
            </div>
            <?php if ($notes): ?>
              <div class="hero-notes">
                <?php foreach ($notes as $note): ?>
                  <span><img src="<?= e(url($note['icon'])) ?>" alt="" /> <?= e($note['text']) ?></span>
                <?php endforeach; ?>
              </div>
            <?php endif; ?>
          </div>

          <div class="hero-visual">
            <div class="hero-glow"></div>
            <div class="device">
              <div class="device-bar">
                <span class="live-dot"></span>
                <?= e(setting('hero_device_label')) ?>
              </div>
              <div class="device-screen">
                <img src="<?= src('hero_device_image', 'assets/IMG_5.png') ?>" alt="<?= e(setting('hero_idea_title')) ?>" decoding="async" />
                <span class="start-chip"><?= e(setting('hero_chip')) ?></span>
                <span class="system-label"><?= e(setting('hero_system')) ?></span>
                <div class="idea-card">
                  <div class="bulb">
                    <img src="<?= src('hero_idea_icon', 'assets/IMG_6.svg') ?>" alt="" />
                  </div>
                  <div>
                    <strong><?= e(setting('hero_idea_title')) ?></strong>
                    <small><?= e(setting('hero_idea_sub')) ?></small>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <?php endif; ?>

      <?php if (section_visible('about')): ?>
      <section class="section about" id="about">
        <?php maybe_img('deco', 'deco_about', 'assets/IMG_11.png', 'left: 46%; top: 12px; width: 80px; transform: rotate(225deg); opacity: 0.35'); ?>
        <div class="container about-grid">
          <div class="about-copy reveal">
            <div class="eyebrow">
              <img class="icon-gold" src="<?= src('icon_spark', 'assets/IMG_1.svg') ?>" alt="" />
              <?= e(setting('about_eyebrow')) ?>
            </div>
            <h2 class="section-title">
              <?= gold_text(setting('about_title'), setting('about_title_gold')) ?>
            </h2>
            <p><?= e(setting('about_p1')) ?></p>
            <p class="about-note"><?= e(setting('about_p2')) ?></p>
            <?php if ($pills): ?>
              <div class="about-pills">
                <?php foreach ($pills as $pill): ?>
                  <div class="mini-card">
                    <img src="<?= e(url($pill['icon'])) ?>" alt="" />
                    <div>
                      <strong><?= e($pill['title']) ?></strong>
                      <span><?= e($pill['text']) ?></span>
                    </div>
                  </div>
                <?php endforeach; ?>
              </div>
            <?php endif; ?>
          </div>

          <article class="stages reveal">
            <div class="stages-head">
              <div>
                <h3><?= e(setting('stages_title')) ?></h3>
                <p><?= e(setting('stages_lead')) ?></p>
              </div>
              <span class="tag"><?= e(setting('stages_tag')) ?></span>
            </div>

            <?php foreach ($stages as $stage): ?>
              <div class="stage">
                <div class="stage-num <?= e($stage['style']) ?>"><?= e($stage['number']) ?></div>
                <div class="stage-top">
                  <h4><?= e($stage['title']) ?></h4>
                  <span class="stage-date"><?= e($stage['date_label']) ?></span>
                </div>
                <p><?= e($stage['text']) ?></p>
                <?php if (trim((string) $stage['extra']) !== ''): ?>
                  <p class="stage-extra"><?= nl2br(e($stage['extra'])) ?></p>
                <?php endif; ?>
              </div>
            <?php endforeach; ?>
          </article>
        </div>
      </section>
      <?php endif; ?>

      <?php if (section_visible('stats')): ?>
      <section class="section stats" id="stats">
        <?php maybe_img('deco', 'deco_stats', 'assets/IMG_13.png', 'right: -40px; top: -20px; width: 160px; transform: rotate(315deg)'); ?>
        <div class="container">
          <span class="section-kicker"><?= e(setting('stats_kicker')) ?></span>
          <h2 class="section-title"><?= e(setting('stats_title')) ?></h2>
          <div class="stats-grid">
            <?php foreach ($stats as $stat): ?>
              <article class="stat-card <?= e(trim($stat['card_class'])) ?> reveal">
                <div class="stat-top">
                  <div class="stat-icon <?= e($stat['icon_class']) ?>"><img src="<?= e(url($stat['icon'])) ?>" alt="" /></div>
                  <?php if ($stat['chip'] !== ''): ?>
                    <span class="chip <?= e($stat['chip_class']) ?>"><?= e($stat['chip']) ?></span>
                  <?php endif; ?>
                </div>
                <span class="stat-value"><?= e($stat['value']) ?></span>
                <h3><?= e($stat['title']) ?></h3>
                <p><?= e($stat['text']) ?></p>
              </article>
            <?php endforeach; ?>
          </div>
        </div>
      </section>
      <?php endif; ?>

      <?php if (section_visible('opportunities')): ?>
      <section class="section opps" id="opportunities">
        <div class="container">
          <div class="eyebrow-center">
            <img src="<?= src('opps_eyebrow_icon', 'assets/IMG_18.svg') ?>" alt="" />
            <?= e(setting('opps_eyebrow')) ?>
          </div>
          <h2 class="section-title"><?= e(setting('opps_title')) ?></h2>
          <p class="section-lead"><?= e(setting('opps_lead')) ?></p>
          <div class="opps-grid">
            <?php foreach ($opps as $opp): ?>
              <article class="opp-card reveal">
                <div class="opp-icon"><img src="<?= e(url($opp['icon'])) ?>" alt="" /></div>
                <h3><?= e($opp['title']) ?></h3>
              </article>
            <?php endforeach; ?>
          </div>
        </div>
      </section>
      <?php endif; ?>

      <?php if (section_visible('directions')): ?>
      <section class="section dirs" id="directions">
        <?php maybe_img('deco', 'deco_dirs', 'assets/IMG_24.png', 'left: 42%; top: -80px; width: 220px; transform: rotate(225deg); opacity: 0.35'); ?>
        <div class="container">
          <div class="dirs-head">
            <div class="eyebrow">
              <img src="<?= src('icon_layers', 'assets/IMG_25.svg') ?>" alt="" />
              <?= e(setting('dirs_eyebrow')) ?>
            </div>
            <h2 class="section-title"><?= e(setting('dirs_title')) ?></h2>
            <a class="btn btn-gold" <?= apply_open_attrs() ?>>
              <img class="icon icon-ink" src="<?= src('icon_spark', 'assets/IMG_1.svg') ?>" alt="" />
              <?= e(setting('dirs_btn')) ?>
            </a>
            <p class="section-lead"><?= e(setting('dirs_lead')) ?></p>
          </div>

          <div class="dirs-grid">
            <?php foreach ($dirs as $dir): ?>
              <article class="dir-card reveal">
                <div class="dir-top">
                  <span class="dir-num"><?= e($dir['number']) ?></span>
                  <img src="<?= e(url($dir['icon'])) ?>" alt="" />
                </div>
                <p><?= e($dir['text']) ?></p>
              </article>
            <?php endforeach; ?>
          </div>
        </div>
      </section>
      <?php endif; ?>

      <?php if (section_visible('cta')): ?>
      <section class="section cta" id="cta">
        <div class="container cta-inner">
          <span class="pill-open"><?= e(setting('cta_pill')) ?></span>
          <div class="cta-row">
            <h2><?= e(setting('cta_title')) ?></h2>
            <div class="cta-actions">
              <a class="btn btn-gold" <?= apply_open_attrs() ?>>
                <img class="icon icon-ink" src="<?= src('icon_spark', 'assets/IMG_1.svg') ?>" alt="" />
                <?= e(setting('cta_btn')) ?>
              </a>
              <a class="btn btn-outline" href="<?= e(setting('cta_outline_href', '#directions')) ?>">
                <img class="icon" src="<?= src('icon_doc', 'assets/IMG_33.svg') ?>" alt="" />
                <?= e(setting('cta_outline')) ?>
              </a>
            </div>
          </div>
          <p><?= e(setting('cta_text')) ?></p>
        </div>
      </section>
      <?php endif; ?>

      <?php if (section_visible('ideas')): ?>
      <section class="section ideas" id="ideas">
        <div class="container">
          <div class="eyebrow-center">
            <img class="icon-gold" src="<?= src('icon_spark', 'assets/IMG_1.svg') ?>" alt="" />
            <?= e(setting('ideas_eyebrow')) ?>
          </div>
          <h2 class="section-title"><?= e(setting('ideas_title')) ?></h2>
          <p class="section-lead"><?= e(setting('ideas_lead')) ?></p>
          <div class="ideas-grid">
            <?php foreach ($ideas as $idea): ?>
              <article class="idea-block reveal">
                <div class="idea-block-top">
                  <div class="idea-ico"><img src="<?= e(url($idea['icon'])) ?>" alt="" /></div>
                  <?php if ($idea['badge'] !== ''): ?>
                    <span class="chip-priority"><?= e($idea['badge']) ?></span>
                  <?php endif; ?>
                </div>
                <h3><?= e($idea['title']) ?></h3>
                <p><?= e($idea['text']) ?></p>
                <?php if ($idea['meta'] !== ''): ?>
                  <div class="idea-meta">
                    <img src="<?= e(url('assets/IMG_10.svg')) ?>" alt="" />
                    <?= e($idea['meta']) ?>
                  </div>
                <?php endif; ?>
              </article>
            <?php endforeach; ?>
          </div>
        </div>
      </section>
      <?php endif; ?>

      <?php if (section_visible('organizers')): ?>
      <section class="section orgs" id="organizers">
        <?php maybe_img('deco', 'deco_orgs_l', 'assets/IMG_36.png', 'left: -20px; top: 24px; width: 120px; opacity: 0.45'); ?>
        <?php maybe_img('deco', 'deco_orgs_r', 'assets/IMG_35.png', 'right: -30px; top: 8px; width: 140px; transform: rotate(232deg); opacity: 0.55'); ?>
        <div class="container">
          <span class="section-kicker"><?= e(setting('orgs_kicker')) ?></span>
          <h2 class="section-title"><?= e(setting('orgs_title')) ?></h2>
          <p class="section-lead"><?= e(setting('orgs_lead')) ?></p>
          <div class="orgs-grid">
            <?php foreach ($orgs as $org): ?>
              <article class="org-card reveal">
                <div class="org-ico"><img src="<?= e(url($org['icon'])) ?>" alt="" /></div>
                <h3><?= e($org['title']) ?></h3>
                <p><?= e($org['text']) ?></p>
              </article>
            <?php endforeach; ?>
          </div>
        </div>
      </section>
      <?php endif; ?>

      <?php if (section_visible('partners')): ?>
      <section class="section partners" id="partners">
        <div class="container">
          <span class="section-kicker"><?= e(setting('partners_kicker')) ?></span>
          <h2 class="section-title"><?= e(setting('partners_title')) ?></h2>
          <div class="partners-list">
            <?php foreach ($partners as $partner): ?>
              <article class="partner reveal">
                <div class="partner-ico"><img src="<?= e(url($partner['icon'])) ?>" alt="" /></div>
                <strong><?= e($partner['title']) ?></strong>
                <span class="partner-role"><?= e($partner['role']) ?></span>
              </article>
            <?php endforeach; ?>
          </div>
        </div>
      </section>
      <?php endif; ?>
    </main>

    <?php if (section_visible('footer')): ?>
    <footer class="site-footer" id="contacts">
      <?php maybe_img('deco', 'deco_footer', 'assets/IMG_35.png', 'right: -20px; top: 40px; width: 150px; transform: rotate(232deg); opacity: 0.5'); ?>
      <div class="container">
        <div class="footer-grid">
          <div class="footer-brand">
            <img src="<?= src('footer_logo', 'assets/IMG_38.png') ?>" alt="<?= e(setting('site_title')) ?>" />
            <p><?= e(setting('footer_text')) ?></p>
            <div class="status-pill"><i></i> <?= e(setting('footer_status')) ?></div>
          </div>

          <div class="footer-col">
            <h3><?= e(setting('contacts_title')) ?></h3>
            <div class="contact-list">
              <p>
                <img src="<?= src('icon_pin', 'assets/IMG_41.svg') ?>" alt="" />
                <?= e(setting('contact_address')) ?>
              </p>
              <a href="<?= e(tel_href(setting('contact_phone'))) ?>">
                <img src="<?= src('icon_phone', 'assets/IMG_43.svg') ?>" alt="" />
                <?= e(setting('contact_phone')) ?>
              </a>
              <a href="mailto:<?= e(setting('contact_email')) ?>">
                <img src="<?= src('icon_mail', 'assets/IMG_44.svg') ?>" alt="" />
                <?= e(setting('contact_email')) ?>
              </a>
            </div>
          </div>

          <div class="footer-col">
            <h3>
              <img class="icon-gold" src="<?= src('icon_spark', 'assets/IMG_1.svg') ?>" alt="" style="width: 16px; height: 16px; display: inline; vertical-align: -2px; margin-right: 6px" />
              <?= e(setting('socials_title')) ?>
            </h3>
            <div class="socials">
              <?php foreach ($socials as $social): ?>
                <a class="social" href="<?= e($social['url']) ?>" target="_blank" rel="noopener noreferrer">
                  <img src="<?= e(url($social['icon'])) ?>" alt="" />
                  <?= e($social['label']) ?>
                  <img class="ext" src="<?= src('icon_ext', 'assets/IMG_40.svg') ?>" alt="" />
                </a>
              <?php endforeach; ?>
            </div>
          </div>
        </div>

        <div class="footer-bottom">
          <span><?= e(setting('copyright')) ?></span>
          <div class="footer-links">
            <?php foreach ($footerLinks as $i => $link): ?>
              <?php if ($i > 0): ?><span>•</span><?php endif; ?>
              <a href="<?= e($link['url']) ?>"><?= e($link['label']) ?></a>
            <?php endforeach; ?>
          </div>
        </div>
      </div>
      <div class="yanix">
        <div class="container"><?= yanix_html(setting('yanix_text')) ?></div>
      </div>
    </footer>
    <?php endif; ?>

    <div class="apply-modal" id="apply-modal" aria-hidden="true">
      <div class="apply-modal-backdrop" data-apply-close></div>
      <div class="apply-dialog" role="dialog" aria-modal="true" aria-labelledby="apply-modal-title">
        <div class="apply-dialog-head">
          <div>
            <span class="apply-kicker">Анкета участника</span>
            <h2 id="apply-modal-title"><?= e(apply_modal_title()) ?></h2>
          </div>
          <button class="apply-close" type="button" data-apply-close aria-label="Закрыть окно">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="apply-frame-wrap">
          <div class="apply-loader">
            <span class="apply-spinner"></span>
            Загружаем форму…
          </div>
          <iframe
            title="<?= e(apply_modal_title()) ?>"
            data-src="<?= e(apply_form_url()) ?>"
            src="about:blank"
            loading="lazy"
          ></iframe>
        </div>
        <div class="apply-dialog-foot">
          <a href="<?= e(apply_form_url()) ?>" target="_blank" rel="noopener noreferrer">Открыть форму в новой вкладке</a>
        </div>
      </div>
    </div>

    <script src="<?= e(url('/js/main.js')) ?>"></script>
  </body>
</html>
