<section class="demo-section" aria-labelledby="step-cards-heading">
  <h2 id="step-cards-heading">Step & Scheduled Campaign Cards</h2>
  <p>Step progress cards from <em>Card - Step</em> and scheduled campaign cards from <em>Card - Scheduled Campaign</em> Figma frames.</p>

  <div class="demo-row" style="align-items: flex-start;">
    <article class="step-card">
      <span class="step-card__badge">Step 1</span>
      <h3 class="step-card__title">Define Your Audience Goals</h3>
      <p class="step-card__description">Tell us your focus — we’ll shape your contact list and segments.</p>
      <button class="step-card__action step-card__action--done" type="button">
        <i class="ph ph-check-circle"></i> Done
      </button>
    </article>

    <article class="step-card">
      <span class="step-card__badge">Step 1</span>
      <h3 class="step-card__title">Define Your Audience Goals</h3>
      <p class="step-card__description">Tell us your focus — we’ll shape your contact list and segments.</p>
      <button class="step-card__action" type="button">Get started</button>
    </article>

    <article class="scheduled-campaign-card scheduled-campaign-card--scheduled">
      <h3 class="scheduled-campaign-card__title">Summer Sale 2025</h3>
      <p class="scheduled-campaign-card__meta">Email • All subscribers</p>
    </article>

    <article class="scheduled-campaign-card scheduled-campaign-card--draft">
      <h3 class="scheduled-campaign-card__title">Summer Sale 2025</h3>
      <p class="scheduled-campaign-card__meta">Email • All subscribers</p>
    </article>
  </div>

  <h3>Vue step & scheduled campaign cards</h3>
  <div id="vue-step-card-app" class="vue-mount"></div>
  <script type="module">
    import { createApp } from "vue";
    import { GnStepCard, GnScheduledCampaignCard } from "/vue/index.js";

    createApp({
      components: { GnStepCard, GnScheduledCampaignCard },
      data() {
        return {
          stepDone: {
            step: 1,
            total: 6,
            title: "Define Your Audience Goals",
            description: "Tell us your focus — we’ll shape your contact list and segments.",
            done: true,
            actionLabel: "Done"
          },
          stepDefault: {
            step: 1,
            total: 6,
            title: "Define Your Audience Goals",
            description: "Tell us your focus — we’ll shape your contact list and segments."
          },
          scheduled: {
            title: "Summer Sale 2025",
            status: "scheduled",
            meta: ["Email", "All subscribers"]
          },
          draft: {
            title: "Summer Sale 2025",
            status: "draft",
            meta: ["Email", "All subscribers"]
          }
        };
      },
      template: `
        <div class="demo-row" style="align-items: flex-start;">
          <gn-step-card v-bind="stepDone" />
          <gn-step-card v-bind="stepDefault" />
          <gn-scheduled-campaign-card v-bind="scheduled" />
          <gn-scheduled-campaign-card v-bind="draft" />
        </div>
      `
    }).mount("#vue-step-card-app");
  </script>
</section>