<!--
  templateType: page
  isAvailableForNewContent: true
  label: Pricing
  screenshotPath: ../images/template-previews/pricing.png
-->
{% extends "./layouts/base.html" %}

{% block body %}
<div id="main-content" class="body-container-wrapper">

{% dnd_area "dnd_area"
  label="Main section",
  class="body-container body-container--pricing"
%}

  {# Pricing Header #}
  {% dnd_section
    padding={
      "default": {"top": 80, "bottom": 40}
    }
  %}
    {% dnd_column %}
      {% dnd_row %}
        {% dnd_module "pricing_header" path="@hubspot/rich_text", label="Pricing Header" %}
          {% module_attribute "html" %}
            <h1 style="text-align: center;">Choose Your Plan</h1>
            <p style="text-align: center; font-size: 1.2rem;">Select the perfect plan for your business needs</p>
          {% end_module_attribute %}
        {% end_dnd_module %}
      {% end_dnd_row %}
    {% end_dnd_column %}
  {% end_dnd_section %}

  {# Pricing Cards #}
  {% dnd_section
    padding={
      "default": {"top": 40, "bottom": 80}
    }
  %}
    {% dnd_column %}
      {% dnd_row %}
        {% dnd_module "pricing_table" path="../modules/cards-pricingtable.module", label="Pricing Table" %}
        {% end_dnd_module %}
      {% end_dnd_row %}
    {% end_dnd_column %}
  {% end_dnd_section %}

  {# FAQ Section #}
  {% dnd_section
    padding={
      "default": {"top": 80, "bottom": 80}
    }
  %}
    {% dnd_column %}
      {% dnd_row %}
        {% dnd_column width=8, offset=2 %}
          {% dnd_row %}
            {% dnd_module "faq_title" path="@hubspot/rich_text", label="FAQ Title" %}
              {% module_attribute "html" %}
                <h2 style="text-align: center;">Frequently Asked Questions</h2>
              {% end_module_attribute %}
            {% end_dnd_module %}
          {% end_dnd_row %}
          {% dnd_row %}
            {% dnd_module "faq_content" path="@hubspot/rich_text", label="FAQ Content" %}
              {% module_attribute "html" %}
                <div style="margin: 40px 0;">
                  <h3>Can I change my plan later?</h3>
                  <p>Yes, you can upgrade or downgrade your plan at any time. Changes take effect at the next billing cycle.</p>
                </div>
                <div style="margin: 40px 0;">
                  <h3>Is there a setup fee?</h3>
                  <p>No, there are no setup fees. You only pay for your chosen monthly or annual subscription.</p>
                </div>
                <div style="margin: 40px 0;">
                  <h3>Do you offer discounts for annual billing?</h3>
                  <p>Yes, save 20% when you choose annual billing for any of our paid plans.</p>
                </div>
                <div style="margin: 40px 0;">
                  <h3>Can I cancel anytime?</h3>
                  <p>Absolutely. You can cancel your subscription at any time without any penalties.</p>
                </div>
              {% end_module_attribute %}
            {% end_dnd_module %}
          {% end_dnd_row %}
        {% end_dnd_column %}
      {% end_dnd_row %}
    {% end_dnd_column %}
  {% end_dnd_section %}

  {# CTA Section #}
  {% dnd_section
    padding={
      "default": {"top": 80, "bottom": 80}
    }
  %}
    {% dnd_column %}
      {% dnd_row %}
        {% dnd_module "cta_text" path="@hubspot/rich_text", label="CTA Text" %}
          {% module_attribute "html" %}
            <div style="text-align: center;">
              <h2>Still have questions?</h2>
              <p style="font-size: 1.2rem; margin: 20px 0;">Our team is here to help you find the perfect solution.</p>
            </div>
          {% end_module_attribute %}
        {% end_dnd_module %}
      {% end_dnd_row %}
      {% dnd_row %}
        {% dnd_module "cta_button" path="../modules/button.module", label="CTA Button" %}
        {% end_dnd_module %}
      {% end_dnd_row %}
    {% end_dnd_column %}
  {% end_dnd_section %}

{% end_dnd_area %}
</div>
{% endblock body %}
