{% extends '@App/partials/base_light.html.twig' %}

{% block title %}Abonnement requis{% endblock %}

{% block styles %}
  {{ parent() }}
  <style>
    .billing-wrap { max-width: 1200px; margin: 0 auto; }
    .billing-toggle .btn.active { background: #15b56a; border-color: #15b56a; color: #fff; }
    .plan-card { border: 1px solid #e5e7eb; border-radius: 16px; background: #fff; height: 100%; position: relative; }
    .plan-card.highlighted { border-color: #15b56a; box-shadow: 0 0 0 1px rgba(21,181,106,.15); }
    .plan-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); }
    .plan-price { font-size: 42px; line-height: 1; font-weight: 800; letter-spacing: -0.02em; }
    .plan-price-suffix { font-size: 18px; color: #64748b; font-weight: 600; margin-left: 6px; }
    .feature-list li { margin-bottom: 10px; }
    .feature-list i { color: #15b56a; margin-right: 8px; }
    .trust-strip { background: #f8fafc; border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; }
  </style>
{% endblock %}

{% block content %}
<div class="body-wrapper">
  <div class="container-fluid py-5 m-n5">
    {% include '@App/partials/layout/_toast.html.twig' %}
    <div class="text-center"><img src="{{asset('assets/images/app-logo.png')}}" style="max-height:100px;" /></div>
    <div class="billing-wrap" data-controller="billing-toggle">
      <div class="text-center mb-5">
        <h1 class="fw-bold mb-3">Choisissez l'offre adaptée à votre organisation</h1>
        <p class="text-muted fs-4 mb-2">
          Votre accès FundUp nécessite un abonnement actif pour continuer à gérer vos partenariats.
        </p>
        <p class="small text-muted mb-0">Paiement mensuel ou annuel • Sans engagement caché • Résiliation possible à tout moment</p>
      </div>

      <div class="d-flex justify-content-center align-items-center gap-3 mb-5 billing-toggle">
        <div class="btn-group" role="group">
          <button type="button"
                  class="btn btn-outline-secondary active"
                  data-billing-toggle-target="monthlyButton"
                  data-action="click->billing-toggle#selectMonthly">Mensuel</button>
          <button type="button"
                  class="btn btn-outline-secondary"
                  data-billing-toggle-target="yearlyButton"
                  data-action="click->billing-toggle#selectYearly">Annuel</button>
        </div>
        <span class="badge bg-success-subtle text-success border border-success-subtle">-10%</span>
      </div>

      <div class="row g-4 mb-5">
        {% for plan in plans %}
          <div class="col-12 col-lg-4">
            <div class="plan-card p-4 {% if plan.highlighted %}highlighted{% endif %}"
                 data-billing-toggle-target="planCard"
                 data-monthly-price="{{ plan.monthlyPrice|default(0) }}"
                 data-annual-price="{{ plan.annualPrice|default(0) }}"
                 data-annual-discount="{{ plan.annualDiscountPercent|default(10) }}"
                 data-monthly-price-id="{{ plan.stripeMonthlyPriceId|default('') }}"
                 data-annual-price-id="{{ plan.stripeAnnualPriceId|default('') }}"
                 data-monthly-offer-key="{{ plan.offerKeyMonthly|default('') }}"
                 data-annual-offer-key="{{ plan.offerKeyAnnual|default('') }}">

              {% if plan.badge %}
                <span class="badge bg-success text-white plan-badge">{{ plan.badge }}</span>
              {% endif %}

              <div class="text-center mb-3">
                <h3 class="fw-bold mb-2">{{ plan.name }}</h3>
                <p class="text-muted mb-3">{{ plan.description }}</p>
                <div>
                  <span class="plan-price" data-billing-toggle-target="priceText"></span>
                  <span class="plan-price-suffix" data-billing-toggle-target="priceSuffix"></span>
                </div>
                <div class="small text-success mt-2 d-none" data-billing-toggle-target="discountText">10% de remise en annuel</div>
              </div>

              <form method="post" action="{{ path('billing_checkout_create') }}" class="mb-4">
                <input type="hidden" name="_token" value="{{ csrf_token('billing_checkout') }}">
                <input type="hidden" name="plan" value="{{ plan.code }}">
                <input type="hidden" name="billingCycle" data-billing-toggle-target="billingCycleInput" value="monthly">
                <input type="hidden" name="priceId" data-billing-toggle-target="priceIdInput" value="">
                <input type="hidden" name="offer_key" data-billing-toggle-target="offerKeyInput" value="">
                <button type="submit" class="btn btn-success w-100 fw-semibold" data-billing-toggle-target="submitButton">Souscrire</button>
              </form>

              <ul class="list-unstyled feature-list mb-0">
                {% for feature in plan.features %}
                  <li><i class="ti ti-check"></i>{{ feature }}</li>
                {% endfor %}
              </ul>
            </div>
          </div>
        {% else %}
          <div class="col-12">
            <div class="alert alert-warning mb-0">Aucune offre n’est disponible pour le moment. Contactez le support.</div>
          </div>
        {% endfor %}
      </div>

      <div class="trust-strip rounded-4 p-4 mb-5">
        <div class="row g-3 text-center">
          <div class="col-12 col-md-3"><i class="ti ti-shield-check fs-6 text-success"></i><div class="fw-semibold mt-2">Paiement sécurisé via Stripe</div></div>
          <div class="col-12 col-md-3"><i class="ti ti-bolt fs-6 text-success"></i><div class="fw-semibold mt-2">Activation rapide</div></div>
          <div class="col-12 col-md-3"><i class="ti ti-database fs-6 text-success"></i><div class="fw-semibold mt-2">Données conservées</div></div>
          <div class="col-12 col-md-3"><i class="ti ti-receipt fs-6 text-success"></i><div class="fw-semibold mt-2">Facturation claire</div></div>
        </div>
      </div>

      <div class="mb-4 text-center">
        <h3 class="fw-bold mb-4">Questions fréquentes</h3>
        <div class="row g-3">
          <div class="col-12 col-md-4">
            <div class="card h-100 border-0 bg-light">
              <div class="card-body text-start">
                <h5 class="fw-bold">Puis-je changer d'offre ?</h5>
                <p class="text-muted mb-0">Oui, vous pouvez évoluer à tout moment vers une offre supérieure.</p>
              </div>
            </div>
          </div>
          <div class="col-12 col-md-4">
            <div class="card h-100 border-0 bg-light">
              <div class="card-body text-start">
                <h5 class="fw-bold">Le paiement est-il sécurisé ?</h5>
                <p class="text-muted mb-0">Oui, le paiement est traité via Stripe avec standard de sécurité élevé.</p>
              </div>
            </div>
          </div>
          <div class="col-12 col-md-4">
            <div class="card h-100 border-0 bg-light">
              <div class="card-body text-start">
                <h5 class="fw-bold">Quand l'accès est réactivé ?</h5>
                <p class="text-muted mb-0">Immédiatement après validation du paiement par Stripe.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block script %}
  {{ parent() }}
{% endblock %}

{% block head_extra %}
  {{ parent() }}
{% endblock %}