<template>
  <header class="home-hero" style="position:relative;overflow:hidden;min-height:780px;background:radial-gradient(62% 80% at 76% 26%,rgba(255,210,236,.55),transparent 60%),radial-gradient(70% 90% at 18% 84%,rgba(206,196,247,.5),transparent 62%),linear-gradient(180deg,#f8f3fe 0%,#f1ebfc 100%);">
    <div style="position:absolute;top:-140px;right:6%;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(255,196,228,.55),transparent 68%);filter:blur(18px);pointer-events:none;animation:pulseGlow 7s ease-in-out infinite;"></div>
    <div style="position:absolute;bottom:-160px;left:-60px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(190,176,240,.5),transparent 70%);filter:blur(22px);pointer-events:none;animation:pulseGlow 9s ease-in-out infinite;"></div>
    <div style="position:absolute;right:max(-120px,calc(50% - 640px));top:50%;transform:translateY(-50%);width:720px;height:720px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.85),rgba(244,236,255,.4) 55%,transparent 72%);pointer-events:none;"></div>
    <span style="position:absolute;top:64px;left:9%;font-size:20px;color:#e7b13e;animation:twinkle 3s ease-in-out infinite;">✦</span>
    <span style="position:absolute;top:150px;left:40%;font-size:13px;color:#b79be8;animation:twinkle 2.4s ease-in-out .4s infinite;">✦</span>
    <span style="position:absolute;top:300px;left:33%;font-size:12px;color:#f3a9cb;animation:twinkle 2.8s ease-in-out .8s infinite;">✧</span>
    <span style="position:absolute;top:90px;left:53%;font-size:15px;color:#cdb6f0;animation:twinkle 3.4s ease-in-out 1s infinite;">✦</span>
    <span style="position:absolute;top:40px;left:30%;font-size:11px;color:#e7b13e;animation:twinkle 2.6s ease-in-out .2s infinite;">✧</span>
    <span style="position:absolute;top:120px;left:88%;width:10px;height:10px;border-radius:50%;background:#f3a9cb;opacity:.7;"></span>
    <span style="position:absolute;top:230px;left:62%;width:8px;height:8px;border-radius:50%;background:#c9b6f0;opacity:.7;"></span>
    <span style="position:absolute;bottom:120px;left:84%;font-size:14px;color:#e7b13e;animation:twinkle 3.1s ease-in-out 1.4s infinite;">✦</span>

    <img class="home-hero__character" :src="siteContent.hostImageUrl || '/assets/amaterasu2sei_2.png'" alt="Host der VTuber Star Awards" data-hero-char style="position:absolute;top:16px;right:max(-70px,calc(50% - 660px));height:1040px;width:auto;z-index:1;pointer-events:none;filter:drop-shadow(0 26px 50px rgba(120,80,180,.2));-webkit-mask-image:linear-gradient(to bottom,#000 52%,rgba(0,0,0,0) 83%);mask-image:linear-gradient(to bottom,#000 52%,rgba(0,0,0,0) 83%);" />
    <div class="home-hero__veil" style="position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(100deg,#f6f0fe 0%,rgba(246,240,254,.86) 26%,rgba(246,240,254,.3) 46%,transparent 62%);"></div>

    <div class="home-hero__content" style="position:relative;z-index:3;max-width:1200px;margin:0 auto;padding:60px 24px 70px;">
      <div class="home-hero__copy" style="max-width:560px;">
        <div class="home-hero__eyebrow" style="display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:#a98ddb;margin-bottom:22px;">
          <span style="color:#e7b13e;animation:spinSlow 9s linear infinite;display:inline-block;">✦</span> Die große Community-Auszeichnung
        </div>
        <h1 style="margin:0 0 4px;font-family:'Cormorant Garamond',serif;font-weight:700;line-height:.92;">
          <span style="display:block;font-size:clamp(56px,8.4vw,116px);letter-spacing:3px;color:#5f44ad;">VTUBER</span>
          <span style="display:block;font-size:clamp(38px,5.6vw,78px);letter-spacing:5px;background:linear-gradient(95deg,#eeb24a,#d9942a);-webkit-background-clip:text;background-clip:text;color:transparent;">STAR AWARDS</span>
        </h1>
        <div class="home-hero__presented" style="font-family:'Sacramento',cursive;font-size:clamp(32px,3.8vw,48px);color:#8a6fd0;margin:4px 0 22px;transform:rotate(-3deg);transform-origin:left center;display:inline-block;white-space:nowrap;">Presented by {{ siteContent.hostDisplayName }} <span style="font-family:'Cormorant Garamond',serif;color:#c79be6;">✦</span></div>
        <p class="home-hero__body" style="font-size:18px;line-height:1.62;color:#6f6685;max-width:430px;margin:0 0 30px;">
          {{ categoryIntroText }}
        </p>

        <div class="home-hero__phase-card" style="max-width:430px;background:rgba(255,255,255,.46);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.6);border-radius:22px;padding:24px 24px 26px;box-shadow:0 24px 54px rgba(124,86,196,.16);">
          <div style="font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#d9942a;margin-bottom:8px;">Aktuelle Phase</div>
          <div style="display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:8px;">
            <div class="home-hero__phase-title" style="font-family:'Cormorant Garamond',serif;font-weight:700;font-size:28px;color:#3f3556;line-height:1.05;white-space:nowrap;">{{ phaseCardTitle }}</div>
            <span :style="phaseStatusStyle"><span style="width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block;"></span>{{ phaseStatusLabel }}</span>
          </div>
          <p style="font-size:14px;line-height:1.55;color:#8a8398;margin:0 0 8px;white-space:pre-line;">{{ phaseCardDescription }}</p>
          <div style="font-size:12.5px;font-weight:600;color:#a99fc0;margin:0 0 18px;">{{ phaseCardRange }}</div>

          <template v-if="showCountdown">
            <div
              data-dc-ref="phaseCountdownLabelRef"
              style="font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:#a98ddb;margin:0 0 8px;"
              aria-live="polite"
            >
              Phase endet in
            </div>
            <div style="display:flex;border:1px solid #eee4fb;border-radius:14px;overflow:hidden;margin-bottom:22px;background:#fbf8ff;">
              <div style="flex:1;text-align:center;padding:14px 4px;border-right:1px solid #eee4fb;">
                <div data-dc-ref="dRef" style="font-family:'Outfit',sans-serif;font-weight:700;font-size:28px;line-height:1;color:#5a4a8a;">00</div>
                <div style="font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#a99fc0;margin-top:5px;">Tage</div>
              </div>
              <div style="flex:1;text-align:center;padding:14px 4px;border-right:1px solid #eee4fb;">
                <div data-dc-ref="hRef" style="font-family:'Outfit',sans-serif;font-weight:700;font-size:28px;line-height:1;color:#5a4a8a;">00</div>
                <div style="font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#a99fc0;margin-top:5px;">Std</div>
              </div>
              <div style="flex:1;text-align:center;padding:14px 4px;border-right:1px solid #eee4fb;">
                <div data-dc-ref="mRef" style="font-family:'Outfit',sans-serif;font-weight:700;font-size:28px;line-height:1;color:#5a4a8a;">00</div>
                <div style="font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#a99fc0;margin-top:5px;">Min</div>
              </div>
              <div style="flex:1;text-align:center;padding:14px 4px;">
                <div data-dc-ref="sRef" style="font-family:'Outfit',sans-serif;font-weight:700;font-size:28px;line-height:1;color:#c77ab0;">00</div>
                <div style="font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#a99fc0;margin-top:5px;">Sek</div>
              </div>
            </div>
          </template>

          <div>
            <a
              v-if="showPhase"
              :href="publicStreamUrl"
              :style="phasePrimaryActionStyle"
              style-hover="transform:translateY(-2px);"
            >
              {{ phasePrimaryLabel }}
            </a>
            <button
              v-else
              type="button"
              :disabled="phasePrimaryDisabled"
              :aria-disabled="phasePrimaryDisabled"
              :style="phasePrimaryActionStyle"
              @click="onPrimaryPhaseAction"
              style-hover="transform:translateY(-2px);"
            >
              {{ phasePrimaryLabel }}
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="home-hero__host-card" style="position:absolute;z-index:61;right:64px;bottom:96px;background:rgba(255,255,255,.46);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.6);border-radius:18px;padding:18px 24px 20px;box-shadow:0 20px 48px rgba(124,86,196,.18);">
      <div style="font-size:12px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:#a98ddb;margin-bottom:5px;">Host</div>
      <div class="home-hero__host-name" style="display:flex;align-items:center;gap:9px;font-family:'Outfit',sans-serif;font-weight:700;font-size:27px;letter-spacing:.5px;color:#5f44ad;line-height:1;margin-bottom:5px;">{{ siteContent.hostDisplayName.toUpperCase() }} <span style="font-size:19px;color:#e7b13e;">✦</span></div>
      <div style="font-size:14px;color:#8a8398;margin-bottom:14px;">{{ siteContent.hostTagline }}</div>
      <div v-if="siteContent.hostArtistName" style="display:inline-flex;align-items:center;gap:7px;margin:-2px 0 14px;padding:7px 10px;border-radius:999px;background:rgba(241,236,251,.74);font-size:12px;font-weight:700;letter-spacing:.04em;color:#7b68ad;">
        <span style="color:#e7b13e;">✧</span>
        Art by {{ siteContent.hostArtistName }}
      </div>
      <div style="display:flex;gap:10px;flex-wrap:wrap;">
        <a
          v-for="social in hostSocialLinks"
          :key="`host-${social.platform}`"
          :href="social.url"
          :aria-label="social.label"
          style="display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:11px;background:#f1ecfb;text-decoration:none;"
          style-hover="transform:translateY(-2px);background:#e8e0f9;"
        >
          <template v-if="isUploadedSocialIcon(social.icon)">
            <img :src="social.icon" :alt="social.label" style="width:22px;height:22px;object-fit:contain;" />
          </template>
          <template v-else-if="socialSimpleIconPath(social.platform)">
            <svg width="18" height="18" viewBox="0 0 24 24" :fill="socialSimpleIconColor(social.platform)"><path :d="socialSimpleIconPath(social.platform)" /></svg>
          </template>
          <template v-else-if="platformKey(social.platform) === 'twitch'">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="#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>
          </template>
          <template v-else-if="platformKey(social.platform) === 'youtube'">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="#FF0000"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1A31 31 0 0 0 24 12a31 31 0 0 0-.5-5.8zM9.5 15.5v-7l6.5 3.5z"/></svg>
          </template>
          <template v-else>
            <span style="font-size:16px;font-weight:800;color:#5f44ad;">{{ social.icon || '✦' }}</span>
          </template>
        </a>
      </div>
    </div>

    <div style="position:absolute;top:0;left:0;right:0;height:4px;z-index:5;background:linear-gradient(90deg,#8b6cdb,#e7b13e,#ff8fc0);"></div>
  </header>
</template>

<script setup lang="ts">
interface HomeSocialLink {
  label: string
  platform: string
  icon: string
  url: string
}

interface HomeSiteContent {
  hostDisplayName: string
  hostTagline: string
  hostArtistName: string
  hostImageUrl: string
}

defineProps<{
  siteContent: HomeSiteContent
  hostSocialLinks: HomeSocialLink[]
  categoryIntroText: string
  phaseCardTitle: string
  phaseStatusStyle: string
  phaseStatusLabel: string
  phaseCardDescription: string
  phaseCardRange: string
  showCountdown: boolean
  publicStreamUrl: string
  showPhase: boolean
  phasePrimaryLabel: string
  phasePrimaryDisabled: boolean
  phasePrimaryActionStyle: string
  onPrimaryPhaseAction: (event?: Event) => void
  isUploadedSocialIcon: (icon: string | null | undefined) => boolean
  socialSimpleIconPath: (platform: string | null | undefined) => string
  socialSimpleIconColor: (platform: string | null | undefined) => string
  platformKey: (platform: string | null | undefined) => string
}>()
</script>
