<section class="section plans">
  <h2>Need more power? We’ve got you covered.<br>Upgrading gives you more space, bandwidth, features, <strong>and helps us keep the free sites free, forever.</strong></h2>
  
  <div class="plan-overview">
    <div class="header">
      <div class="col col-25 personal">
        Free
      </div>
      <div class="col col-75 professional">
        Supporter
      </div>
    </div>
    
    <div class="body">
      <div class="col col-25 free">
        <div class="plan-image free" data-original-title="Pick me!">
        </div>
        <h3>Free</h3>
        <div class="price">$<%= Site::PLAN_FEATURES[:free][:price] %></div>
        <div class="interval">per month</div>
        <a href="/" class="btn-Action">Choose</a>
        <ul>
          <li><strong><%= Site::PLAN_FEATURES[:free][:space].to_space_pretty %></strong> storage</li>
          <li><strong><%= Site::PLAN_FEATURES[:free][:bandwidth].to_space_pretty %></strong> bandwidth</li>
        </ul>
        <ul>
        </ul>
      </div>
      
      <div class="col col-25 supporter">
        <div class="plan-image" data-original-title="No no, pick me!"></div>
        <h3>Supporter</h3>
        <div class="price">$<%= Site::PLAN_FEATURES[:supporter][:price] %></div>
        <div class="interval">per month, billed annually</div>
        <a href="/" class="btn-Action">Choose</a>
        <ul>
          <li><strong><%= Site::PLAN_FEATURES[:supporter][:space].to_space_pretty %></strong> storage</li>
          <li><strong><%= Site::PLAN_FEATURES[:supporter][:bandwidth].to_space_pretty %></strong> bandwidth</li>
        </ul>
        <ul>
          <li>Unlimited Sites</li>
          <li>More space</li>
        </ul>
      </div>
      
      <div class="col col-25 catbus">

        <div class="plan-image" data-original-title="VROOOOOOM!"></div>
        <h3>Cat Bus</h3>
        <div class="price">$<%= Site::PLAN_FEATURES[:catbus][:price] %></div>
        <div class="interval">per month</div>
        <a href="/" class="btn-Action">Choose</a>
        <ul>
          <li><strong><%= Site::PLAN_FEATURES[:catbus][:space].to_space_pretty %></strong> storage</li>
          <li><strong><%= Site::PLAN_FEATURES[:catbus][:bandwidth].to_space_pretty %></strong> bandwidth</li>
        </ul>
        <ul>
          <li>Unlimited Sites</li>
          <li>Custom SSL Certificates</li>
          <li>No upload type restrictions</li>
          <li>Even more space</li>
        </ul>
      </div>
      
      <div class="col col-25 fatcat">
        <div class="plan-image" data-original-title="Jolly good."></div>
        <h3>Fat Cat</h3>
        <div class="price">$<%= Site::PLAN_FEATURES[:fatcat][:price] %></div>
        <div class="interval">per month</div>
        <a href="/" class="btn-Action">Choose</a>
        <ul>
          <li><strong><%= Site::PLAN_FEATURES[:fatcat][:space].to_space_pretty %></strong> storage</li>
          <li><strong><%= Site::PLAN_FEATURES[:fatcat][:bandwidth].to_space_pretty %></strong> bandwidth</li>
        </ul>
        <ul>
          <li>Unlimited Sites</li>
          <li>Custom SSL Certificates</li>
          <li>No upload type restrictions</li>
          <li>A lot more space!</li>
        </ul>
      </div>
      
    </div>
    
  </div>
  
  <!-- <h2><a href="">Compare Plans <i class="fa fa-caret-down"></i></a></h2> -->
  <h2 style="margin-top: 2em">Compare Plans</h2>
  <table class="plan-chart">
    <tr>
      <th class="feature-column"></th>
      <th>
        <h3>Free</h3>
        <p>$<%= Site::PLAN_FEATURES[:free][:price] %>/mo</p>
        <a href="/" class="btn-Action">Choose</a>
      </th>
      <th class="professional">
        <h3>Supporter</h3>
        <p>$<%= Site::PLAN_FEATURES[:supporter][:price] %>/mo</p>
        <a href="/" class="btn-Action">Choose</a>
      </th>
      <th class="professional">
        <h3>Cat Bus</h3>
        <p>$<%= Site::PLAN_FEATURES[:catbus][:price] %>/mo</p>
        <a href="/" class="btn-Action">Choose</a>
      </th>
      <th class="professional">
        <h3>Fat Cat</h3>
        <p>$<%= Site::PLAN_FEATURES[:fatcat][:price] %>/mo</p>
        <a href="/" class="btn-Action">Choose</a>
      </th>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="How much disk space you can use for your site. More space means you can upload more files.">Storage</span>
      </td>
      <td><%= Site::PLAN_FEATURES[:free][:space].to_bytes_pretty %></td>
      <td><%= Site::PLAN_FEATURES[:supporter][:space].to_bytes_pretty %></td>
      <td><%= Site::PLAN_FEATURES[:catbus][:space].to_bytes_pretty %></td>
      <td><%= Site::PLAN_FEATURES[:fatcat][:space].to_bytes_pretty %></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="How much content you can serve in one month. Don’t worry—these are very soft limits, temporary surges are fine, we won't take your site down automatically, and we're very flexible.">Bandwidth</span>
      </td>
      <td><%= Site::PLAN_FEATURES[:free][:bandwidth].to_bytes_pretty %></td>
      <td><%= Site::PLAN_FEATURES[:supporter][:bandwidth].to_bytes_pretty %></td>
      <td><%= Site::PLAN_FEATURES[:catbus][:bandwidth].to_bytes_pretty %></td>
      <td><%= Site::PLAN_FEATURES[:fatcat][:bandwidth].to_bytes_pretty %></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="We will never put ads on your site, or give your data to marketers. In fact, we’re prohibited from doing it in our own Terms of Service.">No advertising, ever</span>
      </td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="Our worldwide network of CDN servers cache your web site regionally, making your site load fast—no matter where your users are. 頑張る, 日本!">Global CDN Site Cache</span>
      </td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="Each site comes with a free Neocities address (yoursitename.neocities.org).">Free Site Subdomain</span>
      </td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="Add your domain name (yoursite.com) to your site!">Custom Domains</span>
      </td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="You can mount your Neocities site to your computer as a hard drive, making it easy to update with your favorite HTML editor.">WebDAV Uploading</span>
      </td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="Downloading your neocities site is as easy as clicking a button.">One-Click Backups</span>
      </td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="Site tags make it easy to find sites you’re interested in, and join communities of sites. It’s like a web ring, but even better.">Site Tags</span>
      </td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="Each site has its own RSS feed that make it easy to let people know when your site changes.">RSS Feed</span>
      </td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="Like a site on Neocities? Now you can follow it, and see when they update!">Follow Your Favorite Sites</span>
      </td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="Each site now has its own profile page, allowing users to see when your site updates, follow your site, and leave feedback.">Site Profile</span>
      </td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="Our HTML5 site editor makes it easy to make quick changes to your site, even if you’re on the run.">Neocities Site Editor</span>
      </td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <!--
    <tr>
      <td class="feature-column">Site Tipping (Coming Soon)</td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    -->
    <tr>
      <td class="feature-column">
        <span data-original-title="Make as many sites as you want, with one account.">Unlimited Site Creation</span>
      </td>
      <td></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="Upload your SSL certificate for your domain name, preventing snoops from seeing your user’s traffic.">Custom SSL Certificates</span>
      </td>
      <td></td>
      <td></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
      <td class="feature-column">
        <span data-original-title="No whitelists—you can upload anything you want (no copyrighted content, trojans, or w4r3z, please).">No File Upload Type Restrictions</span>
      </td>
      <td></td>
      <td></td>
      <td><i class="fa fa-check"></i></td>
      <td><i class="fa fa-check"></i></td>
    </tr>
  </table>
</section>

<script>
  $(function() {
    $('.feature-column span').tooltip({
      placement: 'right'
    })

    $('.plan-image').tooltip({
      placement: 'top'
    })
  })
</script>