---
// src/components/EasterEgg.astro
---
<div x-data="{ open: false, plantClicks: 0, blooming: false }" class="fixed bottom-4 right-4 z-50">
    <!-- Modal -->
    <div x-show="open" x-cloak class="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center z-50">
        <div class="glass p-8 rounded-2xl max-w-sm w-full text-center relative border border-emerald-500/30">
            <button @click="open = false; plantClicks = 0; blooming = false" class="absolute top-4 right-4 text-stone-500 hover:text-white">
                <i class="fa-solid fa-times"></i>
            </button>
            
            <h3 class="text-xl font-luxury font-bold text-white mb-2">Secret Garden</h3>
            <p class="text-stone-400 text-xs mb-6">Klicke auf Gießen, um die Pflanze wachsen zu lassen!</p>
            
            <div class="h-48 flex items-end justify-center mb-6">
                <!-- The Plant -->
                <div class="relative transition-transform duration-200" :style="`transform: scale(${1 + plantClicks * 0.005})`">
                    <div x-show="!blooming" class="text-emerald-500 text-6xl">
                        <i class="fa-solid fa-seedling"></i>
                    </div>
                    <!-- When blooming -->
                    <div x-show="blooming" class="text-6xl animate-bounce">
                        🌸
                    </div>
                </div>
            </div>
            
            <div class="space-y-2">
                <p class="text-xs font-mono text-stone-500">Wachstum: <span x-text="plantClicks"></span>%</p>
                <div class="w-full bg-stone-800 h-1.5 rounded-full overflow-hidden">
                    <div class="bg-emerald-500 h-full transition-all" :style="`width: ${plantClicks}%`"></div>
                </div>
            </div>
            
            <button x-show="!blooming" @click="plantClicks += 10; if(plantClicks >= 100) { plantClicks = 100; blooming = true; }" class="mt-6 w-full py-3 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded-lg text-xs uppercase tracking-widest transition-colors">
                Gießen 💧
            </button>
            
            <!-- Award -->
            <div x-show="blooming" x-cloak class="mt-6 text-center" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100">
                <div class="text-5xl mb-3">🏆</div>
                <h4 class="text-lg font-luxury font-bold text-white mb-1">Auszeichnung verliehen!</h4>
                <p class="text-stone-400 text-xs mb-4 font-light">Hiermit verleihen wir dir den</p>
                
                <div class="bg-amber-500/10 border border-amber-500/30 p-4 rounded-lg inline-block mb-4">
                    <span class="text-amber-500 font-bold uppercase tracking-wider text-xs">Goldener Brabetz-Grüner-Daumen</span>
                </div>
                
                <p class="text-stone-500 text-[10px] font-mono leading-tight mb-4">Zertifikats-ID: BRB-PLX-2026-NICE</p>
                
                <button @click="window.downloadBrabetzPDF()" class="text-xs text-amber-500 hover:text-amber-400 underline uppercase tracking-wider transition-colors">
                    Als PDF herunterladen 📄
                </button>
            </div>
        </div>
    </div>
    
    <!-- Listen for custom event -->
    <div x-init="window.addEventListener('open-easter-egg', () => { open = true; })"></div>
</div>

<script is:inline>
    window.downloadBrabetzPDF = function() {
        const { jsPDF } = window.jspdf;
        const doc = new jsPDF({
            orientation: 'landscape',
            unit: 'mm',
            format: 'a5'
        });
        
        // Background
        doc.setFillColor(24, 24, 27); // Dark stone-900
        doc.rect(0, 0, 210, 148, 'F');
        
        // Border
        doc.setDrawColor(245, 158, 11); // Amber-500
        doc.setLineWidth(1);
        doc.rect(5, 5, 200, 138);
        
        // Text
        doc.setTextColor(255, 255, 255);
        doc.setFontSize(24);
        doc.text("AUSZEICHNUNG", 105, 30, { align: "center" });
        
        doc.setTextColor(120, 113, 108); // Stone-500
        doc.setFontSize(12);
        doc.text("Hiermit verleihen wir", 105, 50, { align: "center" });
        
        doc.setTextColor(245, 158, 11); // Amber-500
        doc.setFontSize(18);
        doc.text("Den Goldenen Brabetz-Grünen-Daumen", 105, 70, { align: "center" });
        
        doc.setTextColor(120, 113, 108); // Stone-500
        doc.setFontSize(10);
        doc.text("für besondere Verdienste um das Pflanzenwachstum.", 105, 90, { align: "center" });
        
        doc.text("Zertifikats-ID: BRB-PLX-2026-NICE", 105, 120, { align: "center" });
        
        doc.save("Brabetz_Auszeichnung.pdf");
    }
</script>