<div class="container mx-auto p-4">
  <!-- Breadcrumbs for SEO and Navigation -->
  @if(breadcrumbs.length > 0) {
  <app-breadcrumbs [breadcrumbs]="breadcrumbs"></app-breadcrumbs>
  }

  <div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg overflow-hidden relative">
    <button (click)="historyService.goBack()" aria-label="Go back"
      class="absolute top-4 right-4 bg-red-500 text-white rounded-full w-10 h-10 flex items-center justify-center hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 print:hidden">
      <i class="fas fa-times"></i>
    </button>
    @if(listing){
    <div class="p-6 flex flex-col lg:flex-row">
      <!-- Left column -->
      <div class="w-full lg:w-1/2 pr-0 lg:pr-6">
        <h1 class="text-2xl font-bold mb-4 break-words">{{ listing.title }}</h1>
        <p class="mb-4 break-words" [innerHTML]="description"></p>

        <div class="space-y-2">
          <div *ngFor="let detail of listingDetails; let i = index" class="flex flex-col sm:flex-row"
            [ngClass]="{ 'bg-neutral-100': i % 2 === 0 }">
            <div class="w-full sm:w-1/3 font-semibold p-2">{{ detail.label }}</div>

            <div class="w-full sm:w-2/3 p-2 break-words" *ngIf="!detail.isHtml && !detail.isListingBy">{{ detail.value
              }}</div>

            <div class="w-full sm:w-2/3 p-2 flex space-x-2 break-words" [innerHTML]="detail.value"
              *ngIf="detail.isHtml && !detail.isListingBy"></div>

            <div class="w-full sm:w-2/3 p-2 flex space-x-2" *ngIf="detail.isListingBy && listingUser">
              <a routerLink="/details-user/{{ listingUser.id }}"
                class="text-primary-600 dark:text-primary-500 hover:underline">{{ listingUser.firstname }} {{
                listingUser.lastname }}</a>
              <div class="relative w-[100px] h-[30px] mr-5 lg:mb-0" *ngIf="listing.imageName">
                <img ngSrc="{{ env.imageBaseUrl }}/pictures/logo/{{ listing.imageName }}.avif?_ts={{ ts }}" fill
                  class="object-contain"
                  alt="Business logo for {{ listingUser.firstname }} {{ listingUser.lastname }}" />
              </div>
            </div>
          </div>
        </div>
        <div class="py-4 print:hidden">
          @if(listing && listingUser && (listingUser?.email===user?.email || (authService.isAdmin() | async))){
          <div class="inline">
            <button class="share share-edit text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
              [routerLink]="['/editBusinessListing', listing.id]">
              <i class="fa-regular fa-pen-to-square"></i>
              <span class="ml-2">Edit</span>
            </button>
          </div>
          } @if(user){
          <div class="inline">
            <button class="share share-save text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
              (click)="toggleFavorite()">
              <i class="fa-regular fa-heart"></i>
              @if(listing.favoritesForUser.includes(user.email)){
              <span class="ml-2">Saved ...</span>
              }@else {
              <span class="ml-2">Save</span>
              }
            </button>
          </div>
          }
          <share-button button="print" showText="true" (click)="createEvent('print')"></share-button>
          <!-- <share-button button="email" showText="true"></share-button> -->
          <div class="inline">
            <button class="share share-email text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
              (click)="showShareByEMail()">
              <i class="fa-solid fa-envelope"></i>
              <span class="ml-2">Email</span>
            </button>
          </div>

          <div class="inline">
            <button type="button"
              class="share share-facebook text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
              (click)="shareToFacebook()">
              <i class="fab fa-facebook"></i>
              <span class="ml-2">Facebook</span>
            </button>
          </div>

          <div class="inline">
            <button type="button"
              class="share share-twitter text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
              (click)="shareToTwitter()">
              <i class="fab fa-x-twitter"></i>
              <span class="ml-2">X</span>
            </button>
          </div>

          <div class="inline">
            <button type="button"
              class="share share-linkedin text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
              (click)="shareToLinkedIn()">
              <i class="fab fa-linkedin"></i>
              <span class="ml-2">LinkedIn</span>
            </button>
          </div>
        </div>
        <!-- Karte hinzufügen, wenn Straße vorhanden ist -->
        <div *ngIf="listing.location.latitude && listing.location.longitude" class="mt-6">
          <h2 class="text-xl font-semibold mb-2">Location Map</h2>
          <!-- <div style="height: 300px" leaflet [leafletOptions]="mapOptions" [leafletLayers]="mapLayers" [leafletCenter]="mapCenter" [leafletZoom]="mapZoom"></div> -->
          <div style="height: 400px" leaflet [leafletOptions]="mapOptions" [leafletLayers]="mapLayers"
            [leafletCenter]="mapCenter" [leafletZoom]="mapZoom" (leafletMapReady)="onMapReady($event)"></div>
        </div>
      </div>

      <!-- Right column -->
      <div class="w-full lg:w-1/2 mt-6 lg:mt-0 print:hidden">
        <h2 class="md:mt-8 mb-4 text-xl font-bold">Contact the Author of this Listing</h2>
        <p class="text-sm mb-4">Please include your contact info below</p>
        <form class="space-y-4">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <app-validated-input label="Your Name" name="name" [(ngModel)]="mailinfo.sender.name"></app-validated-input>
            <app-validated-input label="Your Email" name="email" [(ngModel)]="mailinfo.sender.email"
              kind="email"></app-validated-input>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <app-validated-input label="Phone Number" name="phoneNumber" [(ngModel)]="mailinfo.sender.phoneNumber"
              mask="(000) 000-0000"></app-validated-input>
            <!-- <app-validated-input label="Country/State" name="state" [(ngModel)]="mailinfo.sender.state"></app-validated-input> -->
            <app-validated-ng-select label="State" name="state" [(ngModel)]="mailinfo.sender.state"
              [items]="selectOptions?.states"></app-validated-ng-select>
          </div>

          <div>
            <app-validated-textarea label="Questions/Comments" name="comments"
              [(ngModel)]="mailinfo.sender.comments"></app-validated-textarea>
          </div>
          <button (click)="mail()"
            class="w-full sm:w-auto px-4 py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-opacity-50">Submit</button>
        </form>
      </div>
    </div>

    <!-- Disclaimer: volle Breite, unterhalb beider Spalten -->
    <div class="px-6 pb-6">
      <p class="text-sm text-neutral-500 leading-relaxed border-t border-neutral-200 pt-4">
        The information on this listing has been provided by either the seller or a business broker representing the
        seller. BizMatch, Inc. has no interest or stake in the sale of this business and has not verified any of the
        information and assumes no responsibility for its accuracy, veracity, or completeness. See our full
        <a class="text-primary-600 hover:underline hover:cursor-pointer" routerLink="/terms-of-use">Terms of Use</a>.
      </p>
    </div>
    }
  </div>

  <!-- FAQ Section for AEO (Answer Engine Optimization) -->
  @if(businessFAQs && businessFAQs.length > 0) {
  <div class="container mx-auto p-4 mt-8">
    <div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg p-6">
      <h2 class="text-2xl font-bold mb-6 text-gray-900">Frequently Asked Questions</h2>
      <div class="space-y-4">
        @for (faq of businessFAQs; track $index) {
        <details
          class="group border border-gray-200 rounded-lg overflow-hidden hover:border-primary-300 transition-colors">
          <summary
            class="flex items-center justify-between cursor-pointer p-4 bg-gray-50 hover:bg-gray-100 transition-colors">
            <h3 class="text-lg font-semibold text-gray-900">{{ faq.question }}</h3>
            <svg class="w-5 h-5 text-gray-600 group-open:rotate-180 transition-transform" fill="none"
              stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
            </svg>
          </summary>
          <div class="p-4 bg-white border-t border-gray-200">
            <p class="text-gray-700 leading-relaxed">{{ faq.answer }}</p>
          </div>
        </details>
        }
      </div>
      <div class="mt-6 p-4 bg-primary-50 border-l-4 border-primary-500 rounded">
        <p class="text-sm text-gray-700">
          <strong class="text-primary-700">Have more questions?</strong> Contact the seller directly using the form
          above or reach out to our support team for assistance.
        </p>
      </div>
    </div>
  </div>
  }

  <!-- Related Listings Section for SEO Internal Linking -->
  @if(relatedListings && relatedListings.length > 0) {
  <div class="container mx-auto p-4 mt-8">
    <div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg p-6">
      <h2 class="text-2xl font-bold mb-6 text-gray-900">Similar Businesses You May Like</h2>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        @for (related of relatedListings; track related.id) {
        <a [routerLink]="['/business', related.slug || related.id]" class="block group">
          <div
            class="bg-white rounded-lg border border-gray-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:scale-[1.02]">
            <div class="p-4">
              <div class="flex items-center mb-3">
                <i [class]="selectOptions.getIconAndTextColorType(related.type)" class="mr-2 text-lg"></i>
                <span [class]="selectOptions.getTextColorType(related.type)" class="font-semibold text-sm">{{
                  selectOptions.getBusiness(related.type) }}</span>
              </div>
              <h3
                class="text-lg font-bold mb-2 text-gray-900 group-hover:text-primary-600 transition-colors line-clamp-2">
                {{ related.title }}</h3>
              <div class="space-y-1 text-sm text-gray-600">
                <div class="flex justify-between">
                  <span class="font-medium">Price:</span>
                  <span class="font-bold text-primary-600">${{ related.price?.toLocaleString() || 'Contact' }}</span>
                </div>
                @if(related.salesRevenue) {
                <div class="flex justify-between">
                  <span class="font-medium">Revenue:</span>
                  <span>${{ related.salesRevenue?.toLocaleString() }}</span>
                </div>
                }
                <div class="flex justify-between">
                  <span class="font-medium">Location:</span>
                  <span>{{ related.location.name || related.location.county }}, {{
                    selectOptions.getState(related.location.state) }}</span>
                </div>
              </div>
              <div class="mt-4">
                <span
                  class="inline-block bg-primary-100 text-primary-800 text-xs font-medium px-2.5 py-0.5 rounded">View
                  Details →</span>
              </div>
            </div>
          </div>
        </a>
        }
      </div>
    </div>
  </div>
  }
</div>