<section class="locations-section">
  <div class="container">
    <div class="section-header">
      <h2>{{ 'LOCATIONS.TITLE' | translate }}</h2>
      <p class="subtitle">{{ 'LOCATIONS.SUBTITLE' | translate }}</p>
    </div>

    <div class="locations-grid">
      <div class="locations-controls">
        <div class="location-tabs">
          <button 
            class="tab-btn" 
            [class.active]="selectedLocation === 'ticino'" 
            (click)="selectLocation('ticino')">
            {{ 'LOCATIONS.TICINO' | translate }}
          </button>
          <button 
            class="tab-btn" 
            [class.active]="selectedLocation === 'bienne'" 
            (click)="selectLocation('bienne')">
            {{ 'LOCATIONS.BIENNE' | translate }}
          </button>
        </div>

        <div class="location-details">
          <div *ngIf="selectedLocation === 'ticino'" class="details-card">
            <h3>{{ 'LOCATIONS.TICINO' | translate }}</h3>
            <p>{{ 'LOCATIONS.ADDRESS_TICINO' | translate }}</p>
          </div>
          <div *ngIf="selectedLocation === 'bienne'" class="details-card">
            <h3>{{ 'LOCATIONS.BIENNE' | translate }}</h3>
            <p>{{ 'LOCATIONS.ADDRESS_BIENNE' | translate }}</p>
          </div>
          
          <div class="actions">
            <a routerLink="/contact" class="contact-btn">
              {{ 'LOCATIONS.CONTACT_US' | translate }}
            </a>
          </div>
        </div>
      </div>

      <div class="map-container">
        <iframe 
          *ngIf="selectedLocation === 'ticino'"
          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d177305.41680509657!2d8.826330925208468!3d46.00511195679905!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4784407817452d5b%3A0x6a0c0e86b976660!2sTicino%2C%20Svizzera!5e0!3m2!1sit!2sit!4v1700000000000!5m2!1sit!2sit" 
          width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
        </iframe>
        <iframe 
          *ngIf="selectedLocation === 'bienne'"
          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d43521.94247549427!2d7.211756262451172!3d47.13677764958641!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x478e192760f384f9%3A0xcb281f622956f4e6!2sBiel%2C%20Svizzera!5e0!3m2!1sit!2sit!4v1700000000000!5m2!1sit!2sit" 
          width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
        </iframe>
      </div>
    </div>
  </div>
</section>
