{% extends "base.html" %} {% block main %}

<!-- 💸 Pricing Section -->
<section
  style="padding: 60px 20px; background-color: #f8f9fa; text-align: center"
>
  <h1
    style="
      color: #007bff;
      font-size: 36px;
      font-weight: bold;
      margin-bottom: 20px;
    "
  >
    Our Pricing Plans
  </h1>
  <p
    style="font-size: 18px; max-width: 700px; margin: 0 auto 40px; color: #444"
  >
    Choose the plan that fits your cloud and DevOps needs. We support startups
    to enterprise.
  </p>

  <div
    style="display: flex; flex-wrap: wrap; justify-content: center; gap: 40px"
  >
    <!-- 🌱 Starter Plan -->
    <div
      style="
        background: white;
        padding: 30px;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        width: 300px;
      "
    >
      <h3 style="color: #007bff">Starter</h3>
      <p style="font-size: 24px; font-weight: bold; margin: 10px 0">
        $499 / month
      </p>
      <ul style="list-style: none; padding: 0; color: #444">
        <li>Cloud Infrastructure Audit</li>
        <li>Basic CI/CD Setup</li>
        <li>Email Support</li>
      </ul>
      <a
        href="{{ url_for('contact_form') }}"
        class="btn btn-primary mt-3"
        style="margin-top: 20px"
        >Contact Us</a
      >
    </div>

    <!-- 🚀 Pro Plan (Most Popular) -->
    <div
      style="
        background: white;
        padding: 30px;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        width: 300px;
        position: relative;
      "
    >
      <!-- 🔥 Most Popular Badge -->
      <div
        style="
          position: absolute;
          top: -15px;
          left: 50%;
          transform: translateX(-50%);
          background-color: #ffc107;
          color: #000;
          padding: 5px 12px;
          border-radius: 20px;
          font-weight: 600;
          font-size: 14px;
        "
      >
        Most Popular
      </div>
      <h3 style="color: #28a745">Pro</h3>
      <p style="font-size: 24px; font-weight: bold; margin: 10px 0">
        $1,299 / month
      </p>
      <ul style="list-style: none; padding: 0; color: #444">
        <li>Everything in Starter</li>
        <li>Custom CI/CD Pipelines</li>
        <li>Cloud Security Setup</li>
        <li>Slack Support</li>
      </ul>
      <a
        href="{{ url_for('contact_form') }}"
        class="btn btn-success mt-3"
        style="margin-top: 20px"
        >Let’s Talk</a
      >
    </div>

    <!-- 🏢 Enterprise Plan -->
    <div
      style="
        background: white;
        padding: 30px;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        width: 300px;
      "
    >
      <h3 style="color: #6f42c1">Enterprise</h3>
      <p style="font-size: 24px; font-weight: bold; margin: 10px 0">
        Custom Quote
      </p>
      <ul style="list-style: none; padding: 0; color: #444">
        <li>DevSecOps Strategy</li>
        <li>Multi-Cloud Architecture</li>
        <li>24/7 Support</li>
        <li>Dedicated Account Manager</li>
      </ul>
      <a
        href="{{ url_for('contact_form') }}"
        class="btn btn-dark mt-3"
        style="margin-top: 20px"
        >Request a Quote</a
      >
    </div>
  </div>
</section>

<!-- ❓ FAQ Section -->
<section
  style="
    padding: 60px 20px;
    background-color: #fff;
    max-width: 900px;
    margin: 0 auto;
  "
>
  <h3
    style="
      color: #007bff;
      font-size: 28px;
      margin-bottom: 30px;
      text-align: center;
    "
  >
    Frequently Asked Questions
  </h3>

  <div style="margin-bottom: 20px">
    <h4 style="font-size: 20px; font-weight: 600">Is there a free trial?</h4>
    <p>We offer custom trials based on project scope. Let’s talk!</p>
  </div>

  <div style="margin-bottom: 20px">
    <h4 style="font-size: 20px; font-weight: 600">Can I switch plans later?</h4>
    <p>Absolutely. You can upgrade or downgrade your plan at any time.</p>
  </div>

  <div style="margin-bottom: 20px">
    <h4 style="font-size: 20px; font-weight: 600">
      Is support included in all plans?
    </h4>
    <p>
      Email support is included in Starter. Pro and Enterprise include Slack or
      24/7 support.
    </p>
  </div>
</section>

<!-- 🆚 Enhanced Feature Comparison Table -->
<section style="padding: 60px 20px; text-align: center">
  <h3 style="margin-bottom: 30px; color: #007bff">Compare Features</h3>

  <div style="overflow-x: auto">
    <table
      style="
        width: 100%;
        max-width: 1000px;
        margin: auto;
        border-collapse: collapse;
        font-size: 16px;
        background-color: #fff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      "
    >
      <thead style="background: #f1f3f5; color: #333">
        <tr>
          <th
            style="
              padding: 16px;
              text-align: left;
              border-bottom: 1px solid #ccc;
            "
          >
            Feature
          </th>
          <th style="padding: 16px; border-bottom: 1px solid #ccc">Starter</th>
          <th style="padding: 16px; border-bottom: 1px solid #ccc">Pro</th>
          <th style="padding: 16px; border-bottom: 1px solid #ccc">
            Enterprise
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td style="padding: 14px; text-align: left">Cloud Audit</td>
          <td style="text-align: center">✅</td>
          <td style="text-align: center">✅</td>
          <td style="text-align: center">✅</td>
        </tr>
        <tr style="background: #f9f9f9">
          <td style="padding: 14px; text-align: left">CI/CD Setup</td>
          <td style="text-align: center">Basic</td>
          <td style="text-align: center">Custom</td>
          <td style="text-align: center">Custom</td>
        </tr>
        <tr>
          <td style="padding: 14px; text-align: left">Support</td>
          <td style="text-align: center">📧 Email</td>
          <td style="text-align: center">💬 Slack</td>
          <td style="text-align: center">🕐 24/7</td>
        </tr>
        <tr style="background: #f9f9f9">
          <td style="padding: 14px; text-align: left">Security Setup</td>
          <td style="text-align: center">✅</td>
          <td style="text-align: center">✅</td>
          <td style="text-align: center">✅</td>
        </tr>
        <tr>
          <td style="padding: 14px; text-align: left">Dedicated Manager</td>
          <td style="text-align: center">✅</td>
          <td style="text-align: center">✅</td>
          <td style="text-align: center">✅</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

{% endblock %}