---
import BaseLayout from '../layouts/BaseLayout.astro';
import AnchorNav from '../components/AnchorNav.astro';
import TheaterSection from '../components/TheaterSection.astro';
import PhotoGallery from '../components/PhotoGallery.astro';
import { sanityClient } from '../sanity/client';
import { renderPortableText } from '../sanity/portableText';
import { urlFor } from '../sanity/imageUrl';
import { theaterHomepageQuery } from '../sanity/queries';
import { MapPin } from '@lucide/astro';

const content = await sanityClient.fetch(theaterHomepageQuery) ?? {};
---

<BaseLayout title={content.title || 'Freilichttheater Ziefen 2028'}>
  <!-- Anchor Navigation -->
  <AnchorNav />

  <!-- Hero Section -->
  <div class="bg-[#2b2b56] text-white py-12 pb-24 md:py-8 md:pb-16 relative overflow-hidden min-h-[500px] md:min-h-[400px] md:max-w-[100rem]">
    <div class="max-w-[--max-width-container] mx-auto px-[--spacing-md] md:px-[--spacing-sm]">
        <div class="relative flex flex-col items-center md:items-start gap-2 z-8 text-center md:text-left md:pl-12 md:pl-16 min-h-96 md:min-h-80 ">
          <h1 class="text-6xl md:text-8xl md:pt-24 md:h-auto  font-normalmd:mb-4 leading-[1.3] [text-shadow:2px_2px_4px_rgba(0,0,0,0.3)]">
            <span class="title-de" data-lang="de">{content.hero?.title_de || 'Freilichttheater in Ziefen'}</span>
            <span class="title-en" data-lang="en">{content.hero?.title_en || 'Open-Air Theater in Ziefen'}</span>
          </h1>
            <img src="/logo.svg" alt="Theater Ziefen Logo" class="max-h-[30rem] md:absolute md:right-2 md:right-10 opacity-95 z-[5] md:opacity-70" />
          <p class="text-xl md:text-lg leading-relaxed mb-8 md:mb-6 opacity-95 max-w-2xl ">
            <span class="subtitle-de" data-lang="de">{content.hero?.subtitle_de || ''}</span>
            <span class="subtitle-en" data-lang="en">{content.hero?.subtitle_en || ''}</span>
          </p>
          <div class="font-heading text-8xl md:text-6xl font-normal text-accent [text-shadow:3px_3px_6px_rgba(0,0,0,0.4)] mt-4">2028</div>
        </div>
    </div>
  </div>

  <!-- Section 1: Das Projekt -->
  <TheaterSection
    id="projekt"
    titleDe={content.projekt?.title_de || 'Das Projekt'}
    titleEn={content.projekt?.title_en || 'The Project'}
    variant="light"
  >
    <div class="content-de" data-lang="de" set:html={renderPortableText(content.projekt?.content_de)} />
    <div class="content-en" data-lang="en" set:html={renderPortableText(content.projekt?.content_en)} />
  </TheaterSection>

  <!-- Section 2: Wer steckt dahinter -->
  <TheaterSection
    id="team"
    titleDe={content.team?.title_de || 'Wer steckt dahinter'}
    titleEn={content.team?.title_en || "Who's Behind It"}
    variant="dark"
  >
    <div class="content-de" data-lang="de" set:html={renderPortableText(content.team?.content_de)} />
    <div class="content-en" data-lang="en" set:html={renderPortableText(content.team?.content_en)} />

    {content.team?.organizations && content.team.organizations.length > 0 && (
      <div class="grid grid-cols-1 md:grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-12 mt-16">
        {content.team.organizations.map((org: any) => {
          const cardContent = (
            <Fragment>
              {org.logo && (
                <div class="mb-4 flex justify-center">
                  <img src={urlFor(org.logo)} alt={`${org.name} logo`} class="h-20 w-auto object-contain" />
                </div>
              )}
              <h3 class="text-3xl mb-2 text-white">{org.name}</h3>
              <p class="org-role-de m-0 opacity-90" data-lang="de">{org.role_de}</p>
              <p class="org-role-en m-0 opacity-90" data-lang="en">{org.role_en}</p>
            </Fragment>
          );

          return org.url ? (
            <a
              href={org.url}
              target="_blank"
              rel="noopener noreferrer"
              class="block bg-white/10 p-12 rounded-lg text-center transition-all duration-300 hover:-translate-y-1 hover:bg-white/15 no-underline text-white hover:shadow-lg"
            >
              {cardContent}
            </a>
          ) : (
            <div class="bg-white/10 p-12 rounded-lg text-center transition-all duration-300 hover:-translate-y-1 hover:bg-white/15">
              {cardContent}
            </div>
          );
        })}
      </div>
    )}
  </TheaterSection>

  <!-- Section 3: Das Stück -->
  <TheaterSection
    id="stueck"
    titleDe={content.stueck?.title_de || 'Das Stück'}
    titleEn={content.stueck?.title_en || 'The Play'}
    variant="light"
  >
    <div class="content-de" data-lang="de" set:html={renderPortableText(content.stueck?.content_de)} />
    <div class="content-en" data-lang="en" set:html={renderPortableText(content.stueck?.content_en)} />
  </TheaterSection>

  <!-- Section 4: Mitwirkung -->
  <TheaterSection
    id="mitwirkung"
    titleDe={content.mitwirkung?.title_de || 'Mitwirkung im Schauspiel'}
    titleEn={content.mitwirkung?.title_en || 'Participation in the Play'}
    variant="dark"
  >
    <div class="content-de" data-lang="de" set:html={renderPortableText(content.mitwirkung?.content_de)} />
    <div class="content-en" data-lang="en" set:html={renderPortableText(content.mitwirkung?.content_en)} />

    {content.mitwirkung?.director_name && (
      <div class="mt-16 p-12 bg-white/10 rounded-lg text-center">
        <h3 class="text-3xl text-white mb-4">
          <span data-lang="de">Kontakt Regisseur:</span>
          <span data-lang="en">Contact Director:</span>
        </h3>
        <p><strong>{content.mitwirkung.director_name}</strong></p>
        {content.mitwirkung.director_email && (
          <p>
            <span data-lang="de">E-Mail:</span>
            <span data-lang="en">Email:</span>
            {' '}
            <a href={`mailto:${content.mitwirkung.director_email}`} class="text-accent no-underline hover:underline">{content.mitwirkung.director_email}</a>
          </p>
        )}
        {content.mitwirkung.director_phone && (
          <p>
            <span data-lang="de">Telefon:</span>
            <span data-lang="en">Phone:</span>
            {' '}
            <a href={`tel:${content.mitwirkung.director_phone}`} class="text-accent no-underline hover:underline">{content.mitwirkung.director_phone}</a>
          </p>
        )}
      </div>
    )}
  </TheaterSection>

  <!-- Section 5: Termine -->
  <TheaterSection
    id="termine"
    titleDe={content.termine?.title_de || 'Termine'}
    titleEn={content.termine?.title_en || 'Schedule'}
    variant="light"
  >
    {content.termine?.events && content.termine.events.length > 0 && (
      <div class="relative min-h-auto flex flex-col gap-16">
        <svg class="hidden md:flex absolute top-0 left-0 w-full h-full z-1 pointer-events-none" viewBox="0 0 1000 1000" preserveAspectRatio="xMidYMid meet">
          <path
            d="M 50,30 C 150,80 350,150 550,200 S 350,290 100,380 S 300,470 600,560 S 350,670 150,740 S 350,850 550,920"
            fill="none"
            stroke="var(--color-accent)"
            stroke-width="4"
            stroke-dasharray="15,10"
            opacity="0.7"
          />
        </svg>
        {content.termine.events.map((event: any, index: number) => (
          <div class={`relative z-2 flex items-center gap-12 text-left ${(index + 1) % 2 === 0 ? 'md:flex-row-reverse md:text-right md:right-0' : 'md:left-0'}`}>
            <div class="hidden md:flex flex-col items-center in-w-30 max-w-60 md:min-w-auto md:self-start">
                <MapPin class="text-accent" size={40} ></MapPin>
                <div class="mt-6 text-lg font-bold text-accent text-center whitespace-nowrap md:text-base">{event.date}</div>
            </div>
            <div class="flex-1 bg-white/10 p-12 rounded-xl backdrop-blur-[10px] border-2 border-white/20 transition-all duration-300 hover:-translate-y-1 hover:bg-white/15 hover:shadow-[0_8px_20px_rgba(0,0,0,0.3)] max-w-full md:max-w-2xl">
                <div class="md:hidden text-lg font-bold text-accent text-center whitespace-nowrap md:text-base">{event.date}</div>
                <h3 class="text-3xl mb-2 text-white md:text-2xl">
                <span class="event-title-de" data-lang="de">{event.title_de}</span>
                <span class="event-title-en" data-lang="en">{event.title_en}</span>
              </h3>
              <p class="event-desc-de m-0 text-white/90 leading-relaxed" data-lang="de">{event.description_de}</p>
              <p class="event-desc-en m-0 text-white/90 leading-relaxed" data-lang="en">{event.description_en}</p>
            </div>
          </div>
        ))}
      </div>
    )}
  </TheaterSection>

  <!-- Section 6: Presse -->
  <TheaterSection
    id="presse"
    titleDe={content.presse?.title_de || 'Presse'}
    titleEn={content.presse?.title_en || 'Press'}
    variant="dark"
  >
    <div class="content-de" data-lang="de" set:html={renderPortableText(content.presse?.content_de)} />
    <div class="content-en" data-lang="en" set:html={renderPortableText(content.presse?.content_en)} />
  </TheaterSection>

  <!-- Section 7: Foto Galerie -->
  <TheaterSection
    id="gallery"
    titleDe={content.gallery?.title_de || 'Foto Galerie'}
    titleEn={content.gallery?.title_en || 'Photo Gallery'}
    variant="light"
  >
    <PhotoGallery images={content.gallery?.images || []} />
  </TheaterSection>

  <!-- Section 8: Tickets -->
  <TheaterSection
    id="tickets"
    titleDe={content.tickets?.title_de || 'Tickets'}
    titleEn={content.tickets?.title_en || 'Tickets'}
    variant="dark"
  >
    <div class="content-de" data-lang="de" set:html={renderPortableText(content.tickets?.content_de)} />
    <div class="content-en" data-lang="en" set:html={renderPortableText(content.tickets?.content_en)} />

    {content.tickets?.ticket_url && (
      <div class="mt-[--spacing-lg] text-center">
        <a href={content.tickets.ticket_url} class="inline-block py-4 px-10 bg-accent text-secondary no-underline font-bold text-xl rounded-lg transition-all duration-300 shadow-[0_4px_10px_rgba(0,0,0,0.2)] hover:-translate-y-1 hover:shadow-[0_6px_15px_rgba(0,0,0,0.3)] hover:bg-[#fbfa9a]" target="_blank" rel="noopener noreferrer">
          <span data-lang="de">Tickets kaufen</span>
          <span data-lang="en">Buy Tickets</span>
        </a>
      </div>
    )}
  </TheaterSection>
</BaseLayout>