<!-- Hero -->
<section class="py-5">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-7">
        <h2 class="display-6"><?= trad('Subscriptions for agencies, dealerships and recruiters'); ?></h2>
        <p class="lead text-muted"><?= trad('Post in bulk, access advanced tools (CSV import, API, tracking, statistics) and manage your teams from a single place.'); ?></p>
        <div class="d-flex gap-3 align-items-center">
          <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="billingToggle">
            <label class="form-check-label" for="billingToggle"><?= trad('Annual (2 months off)'); ?></label>
          </div>
          <small class="text-muted"><?= trad('Pay annually = 16.7% discount'); ?></small>
        </div>
      </div>
      <div class="col-lg-5 text-lg-end mt-4 mt-lg-0">
        <div class="badge-soft"><?= trad('14-day free trial'); ?></div>
        <p class="mt-3 text-muted"><?= trad('No commitment. Cancel anytime.'); ?></p>
        <a href="#plans" class="btn btn-primary btn-lg"><?= trad('View plans'); ?></a>
      </div>
    </div>
  </div>
</section>

<!-- Pricing Cards -->
<section id="plans" class="py-4">
  <div class="container">
    <div class="row g-4">

      <!-- Starter -->
      <div class="col-md-6 col-lg-3">
        <div class="card h-100">
          <div class="card-body d-flex flex-column">
            <h5 class="card-title"><?= trad('Starter'); ?></h5>
            <p class="text-muted mb-2"><?= trad('For small teams and freelancers'); ?></p>
            <div class="mb-3">
              <div class="price" data-month="199" data-year="1660">199 USD<span class="text-muted fs-6"><?= trad('/month'); ?></span></div>
            </div>
            <ul class="list-unstyled mt-3 mb-4">
              <li><?= trad('Up to 50 listings'); ?></li>
              <li><?= trad('Basic CSV import'); ?></li>
              <li><?= trad('Email support'); ?></li>
            </ul>
            <a href="#contact" class="mt-auto btn btn-outline-primary"><?= trad('Choose'); ?></a>
          </div>
        </div>
      </div>

      <!-- Pro -->
      <div class="col-md-6 col-lg-3">
        <div class="card h-100 card-highlight">
          <div class="card-body d-flex flex-column">
            <h5 class="card-title"><?= trad('Pro'); ?></h5>
            <p class="text-muted mb-2"><?= trad('Ideal for agencies & recruiters'); ?></p>
            <div class="mb-3">
              <div class="price" data-month="499" data-year="4150">499 USD<span class="text-muted fs-6"><?= trad('/month'); ?></span></div>
            </div>
            <ul class="list-unstyled mt-3 mb-4">
              <li><?= trad('Post up to 1000 listings'); ?></li>
              <li><?= trad('Advanced CSV import + basic API'); ?></li>
              <li><?= trad('Multi-user (3 accounts)'); ?></li>
              <li><?= trad('Statistics & tracking'); ?></li>
            </ul>
            <a href="#contact" class="mt-auto btn btn-primary"><?= trad('Choose'); ?></a>
            <small class="text-muted mt-2"><?= trad('Monthly or annual billing.'); ?></small>
          </div>
        </div>
      </div>

      <!-- Dealership -->
      <div class="col-md-6 col-lg-3">
        <div class="card h-100">
          <div class="card-body d-flex flex-column">
            <h5 class="card-title"><?= trad('Dealership'); ?></h5>
            <p class="text-muted mb-2"><?= trad('For car sellers and distributors'); ?></p>
            <div class="mb-3">
              <div class="price" data-month="699" data-year="5810">699 USD<span class="text-muted fs-6"><?= trad('/month'); ?></span></div>
            </div>
            <ul class="list-unstyled mt-3 mb-4">
              <li><?= trad('Unlimited listings'); ?></li>
              <li><?= trad('Full CSV & API import'); ?></li>
              <li><?= trad('Multi-warehouse management & logistics integrations'); ?></li>
              <li><?= trad('Priority support'); ?></li>
            </ul>
            <a href="#contact" class="mt-auto btn btn-outline-primary"><?= trad('Choose'); ?></a>
          </div>
        </div>
      </div>

      <!-- Enterprise -->
      <div class="col-md-6 col-lg-3">
        <div class="card h-100">
          <div class="card-body d-flex flex-column">
            <h5 class="card-title"><?= trad('Enterprise'); ?></h5>
            <p class="text-muted mb-2"><?= trad('Custom solution for large accounts'); ?></p>
            <div class="mb-3">
              <div class="price"><?= trad('On request'); ?></div>
            </div>
            <ul class="list-unstyled mt-3 mb-4">
              <li><?= trad('API & SSO integration'); ?></li>
              <li><?= trad('Developer access & webhooks'); ?></li>
              <li><?= trad('Dedicated training & onboarding'); ?></li>
              <li><?= trad('24/7 customer service'); ?></li>
            </ul>
            <a href="#contact" class="mt-auto btn btn-outline-primary"><?= trad('Request a quote'); ?></a>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>

<!-- Features -->
<section id="features" class="py-5">
  <div class="container">
    <h3><?= trad('What you get'); ?></h3>
    <div class="row mt-4">
      <div class="col-md-6">
        <ul class="list-unstyled">
          <li class="mb-2"><strong><?= trad('Bulk posting'); ?></strong> — <?= trad('CSV import, scheduling and posting calendar.'); ?></li>
          <li class="mb-2"><strong><?= trad('API & Integrations'); ?></strong> — <?= trad('Connect your tools (ERP, CRM, logistics systems).'); ?></li>
          <li class="mb-2"><strong><?= trad('Multi-users'); ?></strong> — <?= trad('Manage roles and permissions for your teams.'); ?></li>
          <li class="mb-2"><strong><?= trad('Advanced statistics'); ?></strong> — <?= trad('Views, contacts, conversion rates per listing.'); ?></li>
        </ul>
      </div>
      <div class="col-md-6">
        <ul class="list-unstyled">
          <li class="mb-2"><strong><?= trad('Priority support'); ?></strong> — <?= trad('Chat/Email for Pro and Dealership plans.'); ?></li>
          <li class="mb-2"><strong><?= trad('Export & Reports'); ?></strong> — <?= trad('CSV exports, automated periodic reports.'); ?></li>
          <li class="mb-2"><strong><?= trad('Security & Compliance'); ?></strong> — <?= trad('Backups, secure access, custom roles.'); ?></li>
          <li class="mb-2"><strong><?= trad('Onboarding'); ?></strong> — <?= trad('Training and guidance for Enterprise accounts.'); ?></li>
        </ul>
      </div>
    </div>
  </div>
</section>
