{{ $title := .title }}
{{ $description := .description }}
{{ $benefits := .benefits }}
{{ $steps := .steps }} 
{{ $actionText := .actionText }}
{{ $actionLink := .actionLink }}
{{ $contactInfo := .contactInfo }}
{{ $contactTitle := .contactTitle }}
{{ $resellerSection := .resellerSection | default false }}
{{ $resellerText := .resellerText | default "Où trouver nos cartes SIM ?" }}
{{ $resellerDescription := .resellerDescription | default "Vous pouvez obtenir votre carte SIM Maore Mobile dans l'un de nos points de vente situés à Mayotte. Rendez-vous sur la page des Doukas Revendeurs pour trouver le point de vente le plus proche de chez vous." }}

<div class="container">
  <div class="row">
    <div class="col-12">
      <!-- Main content section -->
      <div class="card mb-4">
        <div class="card-body">
          <h2 class="card-title">{{ $title }}</h2>
          {{ if $description }}<p>{{ $description }}</p>{{ end }}
          
          {{ if $benefits }}
          <div class="row mt-4">
            {{ range $benefits }}
            <div class="col-md-{{ if gt (len $benefits) 4 }}{{ div 12 (len $benefits) }}{{ else }}4{{ end }}">
              <div class="card h-100">
                <div class="card-body text-center">
                  <h4>{{ .title }}</h4>
                  <p>{{ .description }}</p>
                </div>
              </div>
            </div>
            {{ end }}
          </div>
          {{ end }}
        </div>
      </div>

      <!-- Steps section -->
      {{ if $steps }}
      <div class="card mb-4">
        <div class="card-body">
          <h2 class="card-title">{{ .stepsTitle | default "Comment procéder ?" }}</h2>
          <div class="row">
            {{ range $index, $step := $steps }}
            <div class="col-md-{{ div 12 (len $steps) }} text-center mb-3">
              <div class="step-number">{{ add $index 1 }}</div>
              <h5>{{ $step.title }}</h5>
              <p>{{ $step.description }}</p>
            </div>
            {{ end }}
          </div>
        </div>
      </div>
      {{ end }}

      <!-- Reseller section -->
      {{ if $resellerSection }}
      <div class="card mb-4">
        <div class="card-body">
          <h2 class="card-title">{{ $resellerText }}</h2>
          <p>{{ $resellerDescription }}</p>
          <div class="text-center">
            <a href="{{ $actionLink }}" class="btn btn-primary btn-lg">{{ $actionText }}</a>
          </div>
        </div>
      </div>
      {{ end }}

      <!-- Contact section -->
      {{ if $contactInfo }}
      <div class="card">
        <div class="card-body">
          <h3>{{ $contactTitle | default "Informations de contact" }}</h3>
          <div class="row">
            {{ range $contactInfo }}
            <div class="col-md-6">
              <p><strong>{{ .title }}:</strong></p>
              {{ if .icon }}
              <p><img src="{{ .icon }}" alt="{{ .alt }}" class="mr-2" style="width: 20px;"> {{ .content }}</p>
              {{ else }}
              <p>{{ .content }}</p>
              {{ end }}
              {{ if .hours }}<p>{{ .hours }}</p>{{ end }}
            </div>
            {{ end }}
          </div>
        </div>
      </div>
      {{ end }}
    </div>
  </div>
</div>