<script setup lang="ts">
const props = defineProps<{
  sectionTitle: string
  sectionText: string
  sectionActionLabel: string
  sectionActionHref: string
  sectionActionDisabled: boolean
  sectionActionStyle: string
  nominationPhase: boolean
  reviewPhase: boolean
  onSectionAction: (event?: Event) => void
}>()
</script>

<template>
  <section id="voting" class="home-section" style="max-width:1200px;margin:0 auto;padding:90px 24px;">
    <div class="home-steps-card" style="position:relative;background:#fdfcff;border:1px solid #efe7fb;border-radius:32px;padding:52px 44px;box-shadow:0 22px 60px rgba(124,86,196,.09);margin-bottom:50px;">
      <div style="display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:50px;">
        <span style="font-size:13px;color:#e7b13e;">✦</span>
        <h2 class="home-steps-heading" style="margin:0;font-family:'Outfit',sans-serif;font-weight:700;font-size:clamp(20px,2.4vw,26px);letter-spacing:3px;text-transform:uppercase;color:#6a4fb8;white-space:nowrap;">So funktioniert's</h2>
        <span style="font-size:13px;color:#b9a3e8;">✦</span>
      </div>
      <div style="display:flex;align-items:flex-start;gap:10px;" data-steps>
        <div style="flex:1;">
          <div style="height:170px;border-radius:18px;background:#f6f1fd;border:1px dashed #d8c9f2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#a98ddb;font-family:monospace;font-size:12px;text-align:center;padding:14px;margin-bottom:22px;"><span style="font-size:30px;">✎</span>Illustration<br>Nominieren</div>
          <div style="display:flex;align-items:center;gap:12px;margin-bottom:12px;">
            <span style="flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:2px solid #c9b6f0;font-family:'Outfit',sans-serif;font-weight:700;font-size:16px;color:#7c5fc8;">1</span>
            <h3 style="margin:0;font-family:'Outfit',sans-serif;font-weight:700;font-size:19px;letter-spacing:1.5px;text-transform:uppercase;color:#5f44ad;">Nominieren</h3>
          </div>
          <p style="margin:0;font-size:15.5px;line-height:1.6;color:#7d7491;">Nominiere deine Favoriten in jeder Kategorie — pro Kategorie 3 Nominierungen. Du kannst auch Clips deiner Lieblingsmomente einsenden.</p>
        </div>
        <svg data-step-arrow width="58" height="44" viewBox="0 0 58 44" fill="none" style="flex:none;margin-top:64px;"><path d="M3 12 C 22 4, 40 8, 50 26" stroke="#c2aef0" stroke-width="3" stroke-linecap="round"/><path d="M50 26 L 39 25 M50 26 L 49 14" stroke="#c2aef0" stroke-width="3" stroke-linecap="round"/></svg>
        <div style="flex:1;">
          <div style="height:170px;border-radius:18px;background:#f6f1fd;border:1px dashed #d8c9f2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#a98ddb;font-family:monospace;font-size:12px;text-align:center;padding:14px;margin-bottom:22px;"><span style="font-size:30px;">♡</span>Illustration<br>Voten</div>
          <div style="display:flex;align-items:center;gap:12px;margin-bottom:12px;">
            <span style="flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:2px solid #c9b6f0;font-family:'Outfit',sans-serif;font-weight:700;font-size:16px;color:#7c5fc8;">2</span>
            <h3 style="margin:0;font-family:'Outfit',sans-serif;font-weight:700;font-size:19px;letter-spacing:1.5px;text-transform:uppercase;color:#5f44ad;">Voten</h3>
          </div>
          <p style="margin:0;font-size:15.5px;line-height:1.6;color:#7d7491;">Die Community stimmt über ihre Top-Favoriten ab. Nur 1 Stimme pro Kategorie.</p>
        </div>
        <svg data-step-arrow width="58" height="44" viewBox="0 0 58 44" fill="none" style="flex:none;margin-top:64px;"><path d="M3 12 C 22 4, 40 8, 50 26" stroke="#c2aef0" stroke-width="3" stroke-linecap="round"/><path d="M50 26 L 39 25 M50 26 L 49 14" stroke="#c2aef0" stroke-width="3" stroke-linecap="round"/></svg>
        <div style="flex:1;">
          <div style="height:170px;border-radius:18px;background:#f6f1fd;border:1px dashed #d8c9f2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#a98ddb;font-family:monospace;font-size:12px;text-align:center;padding:14px;margin-bottom:22px;"><span style="font-size:30px;">★</span>Illustration<br>Die Besten</div>
          <div style="display:flex;align-items:center;gap:12px;margin-bottom:12px;">
            <span style="flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:2px solid #c9b6f0;font-family:'Outfit',sans-serif;font-weight:700;font-size:16px;color:#7c5fc8;">3</span>
            <h3 style="margin:0;font-family:'Outfit',sans-serif;font-weight:700;font-size:19px;letter-spacing:1.5px;text-transform:uppercase;color:#5f44ad;">Die Besten</h3>
          </div>
          <p style="margin:0;font-size:15.5px;line-height:1.6;color:#7d7491;">Die Stimmen werden gezählt und die Gewinner live in der Show gekürt!</p>
        </div>
      </div>
    </div>

    <div class="home-cta-card" style="position:relative;overflow:hidden;border-radius:30px;padding:56px 40px;text-align:center;background:linear-gradient(135deg,#8b6cdb,#b78bff);box-shadow:0 30px 70px rgba(124,86,196,.4);">
      <span style="position:absolute;top:24px;left:8%;font-size:22px;color:#fff;opacity:.6;animation:twinkle 3s ease-in-out infinite;">✦</span>
      <span style="position:absolute;bottom:30px;right:12%;font-size:18px;color:#fff;opacity:.6;animation:twinkle 2.6s ease-in-out .5s infinite;">✧</span>
      <span style="position:absolute;top:40%;right:6%;font-size:14px;color:#fff;opacity:.5;animation:twinkle 3.2s ease-in-out 1s infinite;">✦</span>
      <h2 style="font-family:'Cormorant Garamond',serif;font-weight:700;font-size:clamp(30px,3.8vw,44px);color:#fff;margin:0 0 14px;">{{ props.sectionTitle }}</h2>
      <p style="font-size:18px;color:rgba(255,255,255,.92);max-width:540px;margin:0 auto 28px;">{{ props.sectionText }}</p>
      <button
        v-if="props.sectionActionDisabled"
        type="button"
        disabled
        aria-disabled="true"
        :style="props.sectionActionStyle"
      >
        <svg width="22" height="22" viewBox="0 0 24 24" fill="#9B8ABF"><path d="M4 2L2.4 6v14.5h5V23h2.7l2.5-2.5h4L21.6 16V2H4zm15.3 13.1l-2.9 2.9h-4.4l-2.5 2.5v-2.5H6.7V3.7h12.6v11.4z"/><path d="M11.1 7.1h1.7v5h-1.7zM15.7 7.1h1.7v5h-1.7z"/></svg>{{ props.sectionActionLabel }}
      </button>
      <a
        v-else
        :href="props.sectionActionHref"
        @click="props.onSectionAction"
        :style="props.sectionActionStyle"
        style-hover="transform:translateY(-2px);"
      >
        <svg width="22" height="22" viewBox="0 0 24 24" :fill="props.nominationPhase ? '#E855A5' : props.reviewPhase ? '#B7791F' : '#9146FF'"><path d="M4 2L2.4 6v14.5h5V23h2.7l2.5-2.5h4L21.6 16V2H4zm15.3 13.1l-2.9 2.9h-4.4l-2.5 2.5v-2.5H6.7V3.7h12.6v11.4z"/><path d="M11.1 7.1h1.7v5h-1.7zM15.7 7.1h1.7v5h-1.7z"/></svg>{{ props.sectionActionLabel }}
      </a>
    </div>
  </section>
</template>
