---
import Icon from '@ui/Icon.astro'

interface Props {
  class?: string
}

const { class: className } = Astro.props

const sectionClass = ['section', className]
---

<section class:list={sectionClass}>
  <div class="container">
    <div class="pricing">
      <div class="pricing-card">
        <h4 class="pricing-title">Free</h4>
        <div class="pricing-price">
          <span class="pricing-price-currency">$</span>99
          <div class="pricing-price-description">
            <div>per user</div>
            <div>per year</div>
          </div>
        </div>
        <ul class="pricing-features my-5">
          <li>
            <Icon name="check" color="green" class="icon-inline me-1" />Up to 5 developers
          </li>
          <li>
            <Icon name="check" color="green" class="icon-inline me-1" />All marketing + app components
          </li>
          <li>
            <Icon name="check" color="green" class="icon-inline me-1" />Figma UI Kit
          </li>
          <li>
            <Icon name="check" color="green" class="icon-inline me-1" />Lifetime free updates
          </li>
        </ul>
        <div class="pricing-btn"><a href="#" class="btn w-100">Get started</a></div>
      </div>
      <div class="pricing-card featured">
        <div class="pricing-label"><div class="badge bg-primary text-primary-fg">Popular</div></div>
        <h4 class="pricing-title">All features</h4>
        <div class="pricing-price">
          <span class="pricing-price-currency">$</span>199
          <div class="pricing-price-description">
            <div>per user</div>
            <div>per year</div>
          </div>
        </div>
        <ul class="pricing-features my-5">
          <li>
            <Icon name="check" color="green" class="icon-inline me-1" />Up to 5 developers
          </li>
          <li>
            <Icon name="check" color="green" class="icon-inline me-1" />All marketing + app components
          </li>
          <li>
            <Icon name="check" color="green" class="icon-inline me-1" />Figma UI Kit
          </li>
          <li>
            <Icon name="check" color="green" class="icon-inline me-1" />Lifetime free updates
          </li>
        </ul>
        <div class="pricing-btn"><a href="#" class="btn w-100 btn-primary">Get started</a></div>
      </div>
      <div class="pricing-card">
        <h4 class="pricing-title">Other</h4>
        <div class="pricing-price">
          <span class="pricing-price-currency">$</span>99
          <div class="pricing-price-description">
            <div>per user</div>
            <div>per year</div>
          </div>
        </div>
        <ul class="pricing-features my-5">
          <li>
            <Icon name="check" color="green" class="icon-inline me-1" />Up to 5 developers
          </li>
          <li>
            <Icon name="check" color="green" class="icon-inline me-1" />All marketing + app components
          </li>
          <li>
            <Icon name="check" color="green" class="icon-inline me-1" />Figma UI Kit
          </li>
          <li>
            <Icon name="check" color="green" class="icon-inline me-1" />Lifetime free updates
          </li>
        </ul>
        <div class="pricing-btn"><a href="#" class="btn w-100">Get started</a></div>
      </div>
    </div>
  </div>
</section>