<script setup lang="ts">
import type { Component } from 'vue'
import { Sparkles } from '@lucide/vue'

defineProps<{
  eyebrow: string
  title: string
  description?: string
  /** Großes, dekoratives Icon oben rechts */
  icon?: Component
}>()
</script>

<template>
  <section class="relative overflow-hidden rounded-[32px] border border-violet-200/60 bg-[linear-gradient(135deg,#ece2ff_0%,#f6ecff_42%,#fff2dd_100%)] px-7 py-10 shadow-[0_24px_60px_rgba(124,92,255,0.12)] sm:px-12 sm:py-14">
    <!-- dekorativer Schein -->
    <div class="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_88%_18%,rgba(255,255,255,0.7),transparent_42%)]" />

    <!-- Sterne -->
    <svg class="pointer-events-none absolute inset-0 h-full w-full" aria-hidden="true">
      <g fill="#f6b938" opacity="0.7">
        <circle cx="74%" cy="24%" r="3" />
        <circle cx="92%" cy="62%" r="2.5" />
        <circle cx="63%" cy="78%" r="2.5" />
      </g>
      <g fill="#a78bff" opacity="0.6">
        <circle cx="83%" cy="40%" r="2.5" />
        <circle cx="69%" cy="50%" r="2" />
      </g>
    </svg>

    <!-- großes dekoratives Icon -->
    <div
      v-if="icon"
      class="pointer-events-none absolute -right-6 top-1/2 hidden -translate-y-1/2 sm:block"
    >
      <div class="grid h-44 w-44 place-items-center rounded-full bg-white/35 text-amber-400/80 ring-1 ring-white/60 backdrop-blur-sm">
        <component :is="icon" class="h-20 w-20" />
      </div>
    </div>

    <div class="relative max-w-2xl space-y-5">
      <span class="inline-flex items-center gap-2 rounded-full border border-white/70 bg-white/70 px-4 py-1.5 text-[11px] font-semibold uppercase tracking-[0.3em] text-violet-600 shadow-sm backdrop-blur">
        <Sparkles class="h-3.5 w-3.5 text-amber-500" />
        {{ eyebrow }}
      </span>

      <h1 class="font-[Cormorant_Garamond] text-5xl leading-[0.95] text-violet-800 sm:text-6xl">
        {{ title }}
      </h1>

      <p v-if="description" class="max-w-xl text-lg leading-8 text-slate-600">
        {{ description }}
      </p>

      <slot name="actions" />
    </div>
  </section>
</template>
