@page "/"

@inject IJSRuntime JSRuntime
@implements IAsyncDisposable

<section class="about_section" style="background-image: url('images/5KeineAngstvorFehlern2014.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten">

    <div class="hero_area hero-area-visible">

        <!-- slider section -->
        <section class="slider_section" style="background-image: url('images/118EinfacherFrieden2017.jpg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten">
          <div class="container">
            <div class="row">
              <div class="col-md-6 ">
                <div class="detail_box">
                  <h1>
                    Wo Wünsche <br>
                    Wirklichkeit <br>
                    werden
                  </h1>
                  <p>
                    Willkommen auf meiner Webseite, wo Kunst und Technologie sich treffen. Ich freue mich, euch "Meine Wunschprogramm-Assistentin" vorzustellen, ein Projekt, das mir am Herzen liegt und das meine künstlerische Reise in eine aufregende neue Richtung führt.
                  </p>
                  <a href="/aiart" class="">
                    Probier es aus!
                  </a>
                </div>
              </div>
              <div class="col-lg-5 col-md-6 offset-lg-1">
                <div class="img_content">
                  <div class="img_container">
                    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                      <div class="carousel-inner">
                        <div class="carousel-item active">
                          <div class="img-box">
                            <img src="images/keks.jpg" alt="">
                          </div>
                        </div>
                        <div class="carousel-item">
                          <div class="img-box">
                            <img src="images/slider-img2.jpg" alt="">
                          </div>
                        </div>
                        <div class="carousel-item">
                          <div class="img-box">
                            <img src="images/slider-img3.jpg" alt="">
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                    <span class="sr-only">Previous</span>
                  </a>
                  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                    <span class="sr-only">Next</span>
                  </a>
                </div>

              </div>
            </div>
          </div>
        </section>
        <!-- end slider section -->
      </div>
 
  
    @*   <!-- explaining section -->
     <div class="container">
     
           </div>
         *@
  

  <!-- about section -->
    <section class="about_section layout_padding section-animate-left" @ref="animatedAboutSection1">
        <div class="container">
          <div class="row">
              <div class="col-md-6">
              <div class="img_container">
                <div class="img-box b1">
                  <img src="images/about4.jpg" alt="" />
                </div>
              </div>

            </div>
            <div class="col-md-6">
              <div class="detail-box">
                <div class="heading_container">
                  <h2>
                    Was ist der Wunschprogramm-Assistent?
                  </h2>
                  <img src="images/plug.png" alt="">
                </div>
                <p>
                Seit Jahren habe ich Wünsche in Aquarelle verwandelt, sie humorvoll und ironisch interpretiert und ihnen eine neue Dimension gegeben. Jetzt habe ich einen mutigen Schritt gemacht und Künstliche Intelligenz (KI) als meine persönliche Assistentin in dieses kreative Unterfangen einbezogen.
                Auf meiner Webseite Wunschprogramm.ai könnt ihr nun eure Wünsche äußern, die von meiner Wunschprogramm-Assistentin umgesetzt werden. Egal, ob es sich um einen „Happy End“, „Anerkennung“, „Ein Sportwagen“ oder „Sanfter Tod“ handelt, ich interpretiere eure Wünsche fantasievoll und gebe ihnen eine neue inhaltliche Dimension. Die „Wunschprogramm-Assistentin“ generiert in wenigen Momenten ein Bild, das ihr bestellen könnt. Wenn euch die Bilder gefallen, könnt ihr sie als hochwertigen Kunstdruck bestellen, und ich werde sie für euch als Originale handsignieren.

                </p>
                <a href="">
                  Read More
                </a>
              </div>
            </div>
        

          </div>
        </div>
      </section>

    <section class="about_section layout_padding section-animate-right" @ref="animatedAboutSection2">
        <div class="container">
          <div class="row">
            <div class="col-md-6">
              <div class="detail-box">
                <div class="heading_container">
                  <img src="images/plug.png" alt="">
                </div>
                <p>
                Auch politische Persönlichkeiten wie Bundespräsident Frank Walter Steinmeier oder Katarina Barley sowie show-Promis wie Micaela Schäfer und Carlo von Tiedemann haben mir bereits ihre Wünsche anvertraut, und ich lade euch ein, dasselbe zu tun. Es ist eine Gelegenheit, Teil eines kreativen Dialogs zu werden, der über die traditionellen Grenzen der Kunst hinausgeht.
                Auf dieser Webseite findet ihr alle Informationen über mein bisheriges Wunschprogramm, über meinen künstlerischen Werdegang und über die Entstehung und Realisierung dieses Projektes. "Meine Wunschprogramm-Assistentin" ist mehr als nur ein Projekt; es ist eine Erkundung dessen, was Kunst sein kann, wenn sie mit der Technologie von heute verknüpft wird. Ich lade euch ein, diese Reise mit mir zu teilen, eure Wünsche zu äußern und zu sehen, wie sie in Kunst verwandelt werden.
                Besucht Wunschprogramm.ai und entdeckt, was möglich ist, wenn Wünsche, Kunst und Technologie aufeinandertreffen. Ich freue mich darauf, eure Wünsche in Kunst zu verwandeln.

                </p>
                <a href="">
                  Read More
                </a>
              </div>
            </div>
            <div class="col-md-6">
              <div class="img_container">
                <div class="img-box b1">
                  <img src="images/about1.jpg" alt="" />
                </div>
                <div class="img-box b2">
                  <img src="images/about2.jpg" alt="" />
                </div>
              </div>

            </div>

          </div>
        </div>
      </section>

      <!-- end about section -->
</section>


@code {
    private ElementReference animatedAboutSection1;
    private ElementReference animatedAboutSection2;

    private List<ElementReference> animatedElements = new List<ElementReference>();

    private Func<Task> removeScrollListener;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            animatedElements.Add(animatedAboutSection1);
            animatedElements.Add(animatedAboutSection2);

            removeScrollListener = await JSRuntime.InvokeAsync<Func<Task>>(
                "initHeroAreaScrollAnimation"
            );

            await JSRuntime.InvokeVoidAsync("initScrollAnimations", animatedElements);
        }
    }

    private bool isDisposed = false;

    public async ValueTask DisposeAsync()
    {
        if (!isDisposed)
        {
            if (removeScrollListener != null)
            {
                await removeScrollListener.Invoke();
            }
            isDisposed = true;
        }
    }

}