<h2 class="t-sage-heading-6">Small</h2>

<%= sage_component SageHero, {
  alt_text: "Well done alt text",
  description: "Get early access to new unreleased features and work before they go live.",
  image: "card-placeholder-hero.jpg",
  size: "small",
  title: "Be the first to try what Kajabi is building",
} do %>
  <% content_for :sage_hero_footer_actions do %>
    <%= sage_component SageButton, {
      style: "primary",
      value: "Primary action",
    } %>
  <% end %>
<% end %>

<h2 class="t-sage-heading-6">Small Contained</h2>

<%= sage_component SageHero, {
  alt_text: "Well done alt text",
  description: "Get early access to new unreleased features and work before they go live.",
  image: "hero-contained-placeholder.png",
  size: "small",
  title: "Be the first to try what Kajabi is building",
  contained: true,
} do %>
  <% content_for :sage_hero_footer_actions do %>
    <%= sage_component SageButton, {
      style: "primary",
      value: "Primary action",
    } %>
  <% end %>
<% end %>

<h2 class="t-sage-heading-6">Small w/ CTA</h2>

<%= sage_component SageHero, {
  alt_text: "Well done alt text",
  cta_attributes: {
    "data-js-modaltrigger": "cool-modal",
    href: "#",
  },
  description: "Get early access to new unreleased features and work before they go live.",
  image: "card-placeholder-hero.jpg",
  size: "small",
  title: "Be the first to try what Kajabi is building",
} do %>
  <% content_for :sage_hero_footer_actions do %>
    <%= sage_component SageButton, {
      style: "primary",
      value: "Primary action",
    } %>
  <% end %>
<% end %>

<h2 class="t-sage-heading-6">Small Contained w/ CTA</h2>

<%= sage_component SageHero, {
  alt_text: "Well done alt text",
  cta_attributes: {
    "data-js-modaltrigger": "cool-modal",
    href: "#",
  },
  description: "Get early access to new unreleased features and work before they go live.",
  image: "hero-contained-placeholder.png",
  size: "small",
  title: "Be the first to try what Kajabi is building",
  contained: true,
} do %>
  <% content_for :sage_hero_footer_actions do %>
    <%= sage_component SageButton, {
      style: "primary",
      value: "Primary action",
    } %>
  <% end %>
<% end %>

<h2 class="t-sage-heading-6">Small - Borderless with Custom Background</h2>

<%= sage_component SageHero, {
  alt_text: "Well done alt text",
  borderless: true,
  cta_attributes: {
    "data-js-modaltrigger": "cool-modal",
    href: "#",
  },
  custom_background_color: "#E6F4FE",
  description: "Get early access to new unreleased features and work before they go live.",
  image: "card-placeholder-hero.jpg",
  size: "small",
  title: "Be the first to try what Kajabi is building",
} do %>
  <% content_for :sage_hero_footer_actions do %>
    <%= sage_component SageButton, {
      style: "primary",
      value: "Primary action",
    } %>
  <% end %>
<% end %>

<h2 class="t-sage-heading-6">Large</h2>

<%= sage_component SageHero, {
  alt_text: "",
  description: "Get early access to new unreleased features and work before they go live.",
  image: "card-placeholder-hero.jpg",
  title: "Be the first to try what Kajabi is building before anyone else",
  title_tag: "h3",
  size: "large"
} do %>
  <% content_for :sage_hero_footer_actions do %>
    <%= sage_component SageButtonGroup, { gap: :md } do %>
        <%= sage_component SageButton, {
          value: "Primary",
          style: "primary",
        } %>
      <%= sage_component SageButton, {
        value: "Dismiss",
        style: "primary",
        subtle: true,
        attributes: {
          "data-js-hero--dismiss": ""
        }
      } %>
    <% end %>
  <% end %>
<% end %>

<h2 class="t-sage-heading-6">Large Contained</h2>

<%= sage_component SageHero, {
  alt_text: "",
  description: "Get early access to new unreleased features and work before they go live.",
  image: "hero-contained-placeholder.png",
  title: "Be the first to try what Kajabi is building before anyone else",
  title_tag: "h3",
  contained: true,
  size: "large"
} do %>
  <% content_for :sage_hero_footer_actions do %>
    <%= sage_component SageButtonGroup, { gap: :md } do %>
        <%= sage_component SageButton, {
          value: "Primary",
          style: "primary",
        } %>
      <%= sage_component SageButton, {
        value: "Dismiss",
        style: "primary",
        subtle: true,
        attributes: {
          "data-js-hero--dismiss": ""
        }
      } %>
    <% end %>
  <% end %>
<% end %>

<h2 class="t-sage-heading-6">Large w/ CTA</h2>

<%= sage_component SageHero, {
  alt_text: "",
  cta_attributes: {
    "data-js-modaltrigger": "cool-modal",
    href: "#",
  },
  description: "Get early access to new unreleased features and work before they go live.",
  image: "card-placeholder-hero.jpg",
  title: "Be the first to try what Kajabi is building before anyone else",
  title_tag: "h3",
  size: "large"
} do %>
  <% content_for :sage_hero_footer_actions do %>
    <%= sage_component SageButtonGroup, { gap: :md } do %>
        <%= sage_component SageButton, {
          value: "Primary",
          style: "primary",
        } %>
      <%= sage_component SageButton, {
        value: "Dismiss",
        style: "primary",
        subtle: true,
        attributes: {
          "data-js-hero--dismiss": ""
        }
      } %>
    <% end %>
  <% end %>
<% end %>

<h2 class="t-sage-heading-6">Large Contained w/ CTA</h2>

<%= sage_component SageHero, {
  alt_text: "",
  cta_attributes: {
    "data-js-modaltrigger": "cool-modal",
    href: "#",
  },
  description: "Get early access to new unreleased features and work before they go live.",
  image: "hero-contained-placeholder.png",
  title: "Be the first to try what Kajabi is building before anyone else",
  title_tag: "h3",
  contained: true,
  size: "large"
} do %>
  <% content_for :sage_hero_footer_actions do %>
    <%= sage_component SageButtonGroup, { gap: :md } do %>
        <%= sage_component SageButton, {
          value: "Primary",
          style: "primary",
        } %>
      <%= sage_component SageButton, {
        value: "Dismiss",
        style: "primary",
        subtle: true,
        attributes: {
          "data-js-hero--dismiss": ""
        }
      } %>
    <% end %>
  <% end %>
<% end %>

<h2 class="t-sage-heading-6">Large Contained - Borderless with Custom Background</h2>

<%= sage_component SageHero, {
  alt_text: "Well done alt text",
  borderless: true,
  custom_background_color: "#E6F4FE",
  description: "Get early access to new unreleased features and work before they go live.",
  image: "hero-contained-placeholder.png",
  size: "large",
  title: "Be the first to try what Kajabi is building before anyone else",
  contained: true,
} do %>
  <% content_for :sage_hero_footer_actions do %>
    <%= sage_component SageButtonGroup, { gap: :md } do %>
        <%= sage_component SageButton, {
          value: "Primary",
          style: "primary",
        } %>
      <%= sage_component SageButton, {
        value: "Dismiss",
        style: "primary",
        subtle: true,
        attributes: {
          "data-js-hero--dismiss": ""
        }
      } %>
    <% end %>
  <% end %>
<% end %>

<%# Video player modal %>
<%= sage_component SageModal, { id: "cool-modal" } do %>
  <header class="sage-modal__header">
    <h1 class="t-sage-heading-4">Example Sage Modal</h1>
    <aside class="sage-modal__header-aside">
      <button class="sage-btn sage-btn--secondary sage-btn--subtle sage-btn--icon-only-dot-menu-horizontal">
        <span class="visually-hidden">Menu</span>
      </button>
    </aside>
  </header>
  <div class="sage-modal__content">
    <p class="t-sage-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <footer class="sage-modal__footer">
    <aside class="sage-modal__footer-aside">
      <button class="sage-btn sage-btn--subtle sage-btn--secondary" data-js-modal-close>Close Modal</button>
    </aside>
    <button class="sage-btn sage-btn--primary sage-btn--icon-left-check">Take An Action</button>
  </footer>
<% end %>