<section class="demo-section" aria-labelledby="verification-card-heading">
  <h2 id="verification-card-heading">Verification Card</h2>
  <p>Verification status panels from the <em>Characteristics Container</em> Figma frame.</p>

  <div class="demo-row">
    <article class="verification-card verification-card--verified">
      <div class="verification-card__header">
        <h3 class="verification-card__title">Верифіковано</h3>
      </div>
      <ul class="verification-card__list">
        <li class="verification-card__item">
          <i class="ph ph-check-circle"></i>
          Відеоогляд записано через додаток Oselya.AI
        </li>
        <li class="verification-card__item">
          <i class="ph ph-check-circle"></i>
          Геолокація та адреса збігаються
        </li>
        <li class="verification-card__item">
          <i class="ph ph-check-circle"></i>
          Власник / орендодавець на зв'язку
        </li>
      </ul>
      <div class="verification-card__body">
        Оголошення пройшло цифрову верифікацію. Автор записав відеоогляд помешкання безпосередньо через наш додаток.
      </div>
      <div class="verification-card__cta">
        <button class="btn btn-secondary btn-sm" type="button">Дивитися відео</button>
      </div>
      <footer class="verification-card__footer">
        Остання перевірка 09.07.2026, 10:15
      </footer>
    </article>

    <article class="verification-card verification-card--warning">
      <div class="verification-card__header">
        <h3 class="verification-card__title">Оголошення не перевірено системою</h3>
      </div>
      <div class="verification-card__body">
        Це помешкання ще не пройшло відеоверифікацію в нашому додатку. Ми не можемо гарантувати 100% відповідність фотографій та опису реальному стану об'єкта.
      </div>
      <div class="verification-card__notice">
        <h4 class="verification-card__notice-title">Допоможіть нам стати ще точнішими</h4>
        <p class="verification-card__notice-text">Знайшли розбіжність між описом та реальністю? Поділіться цим із нашою службою контролю якості.</p>
        <button class="verification-card__notice-action" type="button">
          Повідомити про неточність
          <i class="ph ph-chevron-right"></i>
        </button>
      </div>
    </article>
  </div>

  <h3>Vue verification cards</h3>
  <div id="vue-verification-card-app" class="vue-mount"></div>
  <script type="module">
    import { createApp } from "vue";
    import { GnVerificationCard } from "/vue/index.js";

    createApp({
      components: { GnVerificationCard },
      data() {
        return {
          card: {
            title: "Верифіковано",
            status: "verified",
            items: [
              { label: "Відеоогляд записано через додаток Oselya.AI" },
              { label: "Геолокація та адреса збігаються" },
              { label: "Власник / орендодавець на зв'язку" }
            ],
            body: "Оголошення пройшло цифрову верифікацію. Автор записав відеоогляд помешкання безпосередньо через наш додаток.",
            cta: "Дивитися відео",
            timestamp: "Остання перевірка 09.07.2026, 10:15"
          }
        };
      },
      template: `
        <div class="demo-row">
          <gn-verification-card
            v-bind="card"
            @cta="console.log('watch video')"
          />

          <gn-verification-card
            title="Не верифіковано"
            status="danger"
            status-text="Важливо! Оголошення не верифіковано"
            :items="[
              { label: 'Це помешкання ще не пройшло відеоверифікацію' }
            ]"
            body="Наш сервіс бореться з фейками, тому користувачі частіше обирають перевірені об'єкти. Зніміть коротке відео помешкання безпосередньо в додатку."
            cta="Почати запис відео"
            :notice="{
              title: 'Важливо! Оновіть відеоогляд',
              text: 'Актуалізуйте стан помешкання на відео, щоб підняти оголошення в результатах пошуку.',
              action: 'Почати запис відео'
            }"
          />
        </div>
      `
    }).mount("#vue-verification-card-app");
  </script>
</section>