{{ define "main" }}

<div class="container">
  <div class="row">

    <div class="col-12 text-center">
      <h1 class="mb-4">{{ .Title }}</h1>
    </div>

    <div class="col-12">
      <div class="card mb-4">
        <div class="card-body">
          <h2 class="card-title">{{ i18n "uniqueRates" }}</h2>
          <p class="lead">{{ i18n "uniqueRatesText" }}</p>
          <p class="text-muted">{{ if eq .Language.Lang "fr" }}Découvrez nos tarifs compétitifs pour rester connecté avec vos proches.{{ else }}Discover our competitive rates to stay connected with your loved ones.{{ end }}</p>
        </div>
      </div>

      <div class="card mb-4">
        <div class="card-body">
          <h2 class="card-title">{{ if eq .Language.Lang "fr" }}Appels vers Mayotte{{ else }}Calls to Mayotte{{ end }}</h2>
          <div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>{{ if eq .Language.Lang "fr" }}Type d'appel{{ else }}Call Type{{ end }}</th>
                  <th>{{ if eq .Language.Lang "fr" }}Tarif{{ else }}Rate{{ end }}</th>
                  <th>{{ if eq .Language.Lang "fr" }}Facturation{{ else }}Billing{{ end }}</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>{{ if eq .Language.Lang "fr" }}Appel local (vers Mayotte){{ else }}Local call (to Mayotte){{ end }}</td>
                  <td><strong>0,15€/minute</strong></td>
                  <td>{{ if eq .Language.Lang "fr" }}Seconde supérieure{{ else }}Per second{{ end }}</td>
                </tr>
                <tr>
                  <td>{{ if eq .Language.Lang "fr" }}SMS local (vers Mayotte){{ else }}Local SMS (to Mayotte){{ end }}</td>
                  <td><strong>0,05€/SMS</strong></td>
                  <td>{{ if eq .Language.Lang "fr" }}Par SMS{{ else }}Per SMS{{ end }}</td>
                </tr>
                <tr>
                  <td>{{ if eq .Language.Lang "fr" }}MMS local (vers Mayotte){{ else }}Local MMS (to Mayotte){{ end }}</td>
                  <td><strong>0,10€/MMS</strong></td>
                  <td>{{ if eq .Language.Lang "fr" }}Par MMS{{ else }}Per MMS{{ end }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <div class="card mb-4">
        <div class="card-body">
          <h2 class="card-title">{{ if eq .Language.Lang "fr" }}Appels internationaux{{ else }}International Calls{{ end }}</h2>
          <p>{{ if eq .Language.Lang "fr" }}Nous proposons des tarifs attractifs vers plus de 50 destinations internationales.{{ else }}We offer attractive rates to over 50 international destinations.{{ end }}</p>

          <div class="row">
            <div class="col-md-6">
              <h4>{{ if eq .Language.Lang "fr" }}Principales destinations{{ else }}Main destinations{{ end }}</h4>
              <div class="table-responsive">
                <table class="table table-sm">
                  <thead>
                    <tr>
                      <th>{{ if eq .Language.Lang "fr" }}Destination{{ else }}Destination{{ end }}</th>
                      <th>{{ if eq .Language.Lang "fr" }}Tarif/min{{ else }}Rate/min{{ end }}</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>{{ if eq .Language.Lang "fr" }}France métropolitaine{{ else }}Metropolitan France{{ end }}</td>
                      <td><strong>0,25€</strong></td>
                    </tr>
                    <tr>
                      <td>La Réunion</td>
                      <td><strong>0,20€</strong></td>
                    </tr>
                    <tr>
                      <td>{{ if eq .Language.Lang "fr" }}Maurice{{ else }}Mauritius{{ end }}</td>
                      <td><strong>0,22€</strong></td>
                    </tr>
                    <tr>
                      <td>Comores</td>
                      <td><strong>0,18€</strong></td>
                    </tr>
                    <tr>
                      <td>Madagascar</td>
                      <td><strong>0,28€</strong></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <div class="col-md-6">
              <h4>{{ if eq .Language.Lang "fr" }}Services de données{{ else }}Data Services{{ end }}</h4>
              <div class="table-responsive">
                <table class="table table-sm">
                  <thead>
                    <tr>
                      <th>{{ if eq .Language.Lang "fr" }}Service{{ else }}Service{{ end }}</th>
                      <th>{{ if eq .Language.Lang "fr" }}Tarif{{ else }}Rate{{ end }}</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>{{ if eq .Language.Lang "fr" }}Connexion Internet{{ else }}Internet connection{{ end }}</td>
                      <td><strong>0,01€/Mo</strong></td>
                    </tr>
                    <tr>
                      <td>{{ if eq .Language.Lang "fr" }}MMS international{{ else }}International MMS{{ end }}</td>
                      <td><strong>0,15€/MMS</strong></td>
                    </tr>
                    <tr>
                      <td>{{ if eq .Language.Lang "fr" }}SMS international{{ else }}International SMS{{ end }}</td>
                      <td><strong>0,08€/SMS</strong></td>
                    </tr>
                    <tr>
                      <td>{{ if eq .Language.Lang "fr" }}Messagerie vocale{{ else }}Voicemail{{ end }}</td>
                      <td><strong>{{ i18n "free" }}</strong></td>
                    </tr>
                    <tr>
                      <td>{{ if eq .Language.Lang "fr" }}Appels vers service client{{ else }}Customer service calls{{ end }}</td>
                      <td><strong>{{ i18n "free" }}</strong></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>

          <div class="text-center mt-3">
            <a href="{{ .Site.BaseURL }}{{ .Language.Lang }}/aide" class="btn btn-outline-primary">{{ i18n "learnMore" }}</a>
          </div>
        </div>
      </div>

      <div class="card mb-4">
        <div class="card-body">
          <h2 class="card-title">{{ i18n "rechargeFromOneEuro" }}</h2>
          <p>{{ i18n "rechargeFromOneEuroText" }}</p>

          <div class="row mt-4">
            <div class="col-md-4">
              <div class="card h-100">
                <div class="card-body text-center">
                  <h4>1€ - 10€</h4>
                  <p>{{ if eq .Language.Lang "fr" }}Recharges flexibles{{ else }}Flexible top-ups{{ end }}</p>
                  <span class="badge badge-success">Popular</span>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="card h-100">
                <div class="card-body text-center">
                  <h4>15€ - 25€</h4>
                  <p>{{ if eq .Language.Lang "fr" }}Bonus +5% de crédit{{ else }}+5% credit bonus{{ end }}</p>
                  <span class="badge badge-info">Bonus</span>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="card h-100">
                <div class="card-body text-center">
                  <h4>{{ if eq .Language.Lang "fr" }}30€ et plus{{ else }}30€ and more{{ end }}</h4>
                  <p>{{ if eq .Language.Lang "fr" }}Bonus +10% de crédit{{ else }}+10% credit bonus{{ end }}</p>
                  <span class="badge badge-warning">Premium</span>
                </div>
              </div>
            </div>
          </div>

          <div class="text-center mt-4">
            <a href="{{ .Site.BaseURL }}{{ .Language.Lang }}/acheter-credit" class="btn btn-primary btn-lg">{{ i18n "rechargeMySim" }}</a>
          </div>
        </div>
      </div>

      <div class="card">
        <div class="card-body">
          <h3>{{ i18n "contactInfo" }}</h3>
          <div class="row">
            <div class="col-md-6">
              <p><strong>{{ i18n "customerService" }}:</strong></p>
              <p><img src="{{ .Site.BaseURL }}img/phone.svg" alt="{{ i18n "phone" }}" class="mr-2" style="width: 20px;"> 06 39 900 900</p>
              <p>{{ i18n "openingHours" }}</p>
            </div>
            <div class="col-md-6">
              <p><strong>{{ i18n "otherContact" }}:</strong></p>
              <p>{{ i18n "email" }}: contact@maoremobile.yt</p>
              <p>{{ i18n "website" }}: www.maoremobile.yt</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
.hero {
  text-align: center;
}

.card {
  border: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.card-body {
  padding: 30px;
}

.card.h-100 {
  height: 100%;
}

.btn-primary {
  background-color: #34af4f;
  border-color: #34af4f;
}

.btn-primary:hover {
  background-color: #2a8e3f;
  border-color: #2a8e3f;
}

.btn-outline-primary {
  color: #34af4f;
  border-color: #34af4f;
}

.btn-outline-primary:hover {
  background-color: #34af4f;
  border-color: #34af4f;
}

.table {
  margin-bottom: 0;
}

.table th {
  background-color: #f8f9fa;
  border-top: none;
}

.badge {
  font-size: 0.8em;
  padding: 0.4em 0.8em;
}

.text-center {
  text-align: center;
}
</style>

{{ end }}