<main class="project-detail">

  @if (project(); as p) {

  <section class="project-detail__hero">
    <div class="project-detail__hero-image">
      <img [src]="p.image" [alt]="p.company" />
      <div class="project-detail__hero-overlay"></div>
    </div>
    <div class="project-detail__hero-content">
      <a routerLink="/" class="project-detail__back">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M19 12H5M12 19l-7-7 7-7"/>
        </svg>
        Zurück
      </a>
      <span class="project-detail__branch">{{ p.branch }}</span>
      <h1 class="project-detail__title">{{ p.company }}</h1>
      <p class="project-detail__description">{{ p.description }}</p>
      @if (p.result) {
        <div class="project-detail__result">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline>
            <polyline points="17 6 23 6 23 12"></polyline>
          </svg>
          <span>{{ p.result }}</span>
        </div>
      }
    </div>
  </section>

  <section class="project-detail__features">
    <div class="project-detail__wrapper">
      <h2 class="project-detail__section-title">Leistungen im Projekt</h2>
      <div class="project-detail__features-grid">
        @for (feature of p.features; track feature.title; let i = $index) {
          <div class="project-detail__feature" [style.--delay]="(i * 100) + 'ms'">
            <div class="project-detail__feature-icon">
              @switch (feature.icon) {
                @case ('search') {
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="11" cy="11" r="8"></circle>
                    <path d="m21 21-4.35-4.35"></path>
                  </svg>
                }
                @case ('smartphone') {
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect>
                    <line x1="12" y1="18" x2="12.01" y2="18"></line>
                  </svg>
                }
                @case ('shield') {
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
                  </svg>
                }
                @case ('target') {
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="12" cy="12" r="10"></circle>
                    <circle cx="12" cy="12" r="6"></circle>
                    <circle cx="12" cy="12" r="2"></circle>
                  </svg>
                }
                @case ('calendar') {
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                    <line x1="16" y1="2" x2="16" y2="6"></line>
                    <line x1="8" y1="2" x2="8" y2="6"></line>
                    <line x1="3" y1="10" x2="21" y2="10"></line>
                  </svg>
                }
                @case ('award') {
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="12" cy="8" r="7"></circle>
                    <polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"></polyline>
                  </svg>
                }
                @case ('calendar-check') {
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                    <line x1="16" y1="2" x2="16" y2="6"></line>
                    <line x1="8" y1="2" x2="8" y2="6"></line>
                    <line x1="3" y1="10" x2="21" y2="10"></line>
                    <path d="m9 16 2 2 4-4"></path>
                  </svg>
                }
                @case ('list') {
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <line x1="8" y1="6" x2="21" y2="6"></line>
                    <line x1="8" y1="12" x2="21" y2="12"></line>
                    <line x1="8" y1="18" x2="21" y2="18"></line>
                    <line x1="3" y1="6" x2="3.01" y2="6"></line>
                    <line x1="3" y1="12" x2="3.01" y2="12"></line>
                    <line x1="3" y1="18" x2="3.01" y2="18"></line>
                  </svg>
                }
                @case ('google') {
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="12" cy="12" r="10"></circle>
                    <path d="M12 8v8"></path>
                    <path d="M8 12h8"></path>
                  </svg>
                }
              }
            </div>
            <div class="project-detail__feature-content">
              <h3>{{ feature.title }}</h3>
              <p>{{ feature.description }}</p>
            </div>
          </div>
        }
      </div>
    </div>
  </section>

  @if (p.testimonial) {
    <section class="project-detail__testimonial">
      <div class="project-detail__wrapper project-detail__wrapper--narrow">
        <blockquote class="project-detail__quote">
          <svg class="project-detail__quote-icon" width="48" height="48" viewBox="0 0 24 24" fill="currentColor">
            <path d="M10 8c-3.314 0-6 2.686-6 6v10c0 1.1.9 2 2 2h2c1.1 0 2-.9 2-2v-6c0-1.1.9-2 2-2h4c1.1 0 2 .9 2 2v6c0 1.1.9 2 2 2h2c1.1 0 2-.9 2-2V14c0-3.314-2.686-6-6-6h-6z"/>
          </svg>
          <p>"{{ p.testimonial.quote }}"</p>
          <footer>
            <cite>
              <strong>{{ p.testimonial.author }}</strong>
              <span>{{ p.testimonial.role }}, {{ p.company }}</span>
            </cite>
          </footer>
        </blockquote>
      </div>
    </section>
  }

  <section class="project-detail__cta">
    <div class="project-detail__wrapper">
      <h2>Erfolgreich online – wie Ihr Projekt</h2>
      <p>Lassen Sie uns gemeinsam Ihr nächstes Projekt realisieren.</p>
      <a routerLink="/#contact" class="project-detail__cta-button">
        Projekt anfragen
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M5 12h14M12 5l7 7-7 7"/>
        </svg>
      </a>
    </div>
  </section>

  @if (otherProjects().length > 0) {
    <section class="project-detail__more">
      <div class="project-detail__wrapper">
        <h2 class="project-detail__section-title">Weitere Projekte</h2>
        <div class="project-detail__more-grid">
          @for (other of otherProjects(); track other.slug) {
            <a
              [routerLink]="['/projekt', other.slug]"
              class="project-detail__more-card">
              <div class="project-detail__more-image">
                <img [src]="other.image" [alt]="other.company" loading="lazy" />
              </div>
              <div class="project-detail__more-content">
                <span class="project-detail__more-branch">{{ other.branch }}</span>
                <h3>{{ other.company }}</h3>
                <span class="project-detail__more-cta">
                  Projekt ansehen
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M5 12h14M12 5l7 7-7 7"/>
                  </svg>
                </span>
              </div>
            </a>
          }
        </div>
      </div>
    </section>
  }

  } @else {
    <div class="project-detail__not-found">
      <div class="project-detail__wrapper">
        <h1>Projekt nicht gefunden</h1>
        <p>Das gesuchte Projekt existiert leider nicht.</p>
        <a routerLink="/" class="project-detail__back-link">Zurück zur Startseite</a>
      </div>
    </div>
  }

</main>
