<section class="demo-section" aria-labelledby="campaign-cards-heading">
  <h2 id="campaign-cards-heading">Campaign Cards</h2>
  <p>Campaign summary cards from the <em>Card - Campaign</em> and <em>Card - Campaign Type</em> Figma frames.</p>

  <div class="demo-row">
    <article class="campaign-card">
      <div class="campaign-card__header">
        <span class="campaign-card__icon"><i class="ph ph-megaphone"></i></span>
        <h3 class="campaign-card__title">July Newsletter</h3>
      </div>
      <div class="campaign-card__meta">
        <div class="campaign-card__meta-item">
          <span class="campaign-card__meta-label">Campaign type</span>
          <span class="campaign-card__meta-value">Email</span>
        </div>
        <div class="campaign-card__meta-item">
          <span class="campaign-card__meta-label">Audience</span>
          <span class="campaign-card__meta-value">All Subscribers</span>
        </div>
        <div class="campaign-card__meta-item">
          <span class="campaign-card__meta-label">Upload date</span>
          <span class="campaign-card__meta-value">July 13, 2025</span>
        </div>
        <div class="campaign-card__meta-item">
          <span class="campaign-card__meta-label">Upload time</span>
          <span class="campaign-card__meta-value">08:30 am</span>
        </div>
      </div>
    </article>

    <article class="campaign-card campaign-card--type">
      <div class="campaign-card__header">
        <span class="campaign-card__icon"><i class="ph ph-envelope"></i></span>
        <h3 class="campaign-card__title">Email campaign</h3>
      </div>
      <p class="campaign-card__text">Send beautifully designed emails to your subscribers and track their performance.</p>
      <button class="campaign-card__action" type="button">Create email</button>
    </article>
  </div>

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

    createApp({
      components: { GnCampaignCard },
      data() {
        return {
          summary: {
            icon: "ph-megaphone",
            title: "July Newsletter",
            meta: [
              { label: "Campaign type", value: "Email" },
              { label: "Audience", value: "All Subscribers" },
              { label: "Upload date", value: "July 13, 2025" },
              { label: "Upload time", value: "08:30 am" }
            ]
          },
          type: {
            variant: "type",
            icon: "ph-envelope",
            title: "Email campaign",
            action: "Create email"
          }
        };
      },
      template: `
        <div class="demo-row">
          <gn-campaign-card v-bind="summary" />
          <gn-campaign-card v-bind="type" text="Send beautifully designed emails to your subscribers and track their performance." @action="console.log('create email')" />
        </div>
      `
    }).mount("#vue-campaign-card-app");
  </script>
</section>