<template>
  <svg viewBox="0 0 500 480" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-auto">
    <defs>
      <linearGradient id="hero-book1" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stop-color="#4F46E5" />
        <stop offset="100%" stop-color="#818CF8" />
      </linearGradient>
      <linearGradient id="hero-book2" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stop-color="#22C55E" />
        <stop offset="100%" stop-color="#4ADE80" />
      </linearGradient>
      <linearGradient id="hero-book3" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stop-color="#F59E0B" />
        <stop offset="100%" stop-color="#FBBF24" />
      </linearGradient>
      <linearGradient id="hero-bulb" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="#FBBF24" />
        <stop offset="100%" stop-color="#F59E0B" />
      </linearGradient>
      <linearGradient id="hero-cap" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stop-color="#1E1B4B" />
        <stop offset="100%" stop-color="#3730A3" />
      </linearGradient>
      <filter id="hero-shadow" x="-20%" y="-20%" width="140%" height="140%">
        <feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="#4F46E5" flood-opacity="0.15" />
      </filter>
      <filter id="hero-glow" x="-50%" y="-50%" width="200%" height="200%">
        <feGaussianBlur stdDeviation="6" result="blur" />
        <feMerge><feMergeNode in="blur" /><feMergeNode in="SourceGraphic" /></feMerge>
      </filter>
    </defs>

    <!-- Stacked books -->
    <g class="animate-book-stack" filter="url(#hero-shadow)">
      <rect x="120" y="300" width="180" height="30" rx="4" fill="url(#hero-book1)" />
      <rect x="122" y="302" width="176" height="3" rx="1" fill="white" opacity="0.3" />
      <rect x="130" y="270" width="170" height="28" rx="4" fill="url(#hero-book2)" />
      <rect x="132" y="272" width="166" height="3" rx="1" fill="white" opacity="0.3" />
      <rect x="115" y="242" width="185" height="26" rx="4" fill="url(#hero-book3)" />
      <rect x="117" y="244" width="181" height="3" rx="1" fill="white" opacity="0.3" />
      <rect x="135" y="214" width="160" height="26" rx="4" fill="#E879F9" />
      <rect x="137" y="216" width="156" height="3" rx="1" fill="white" opacity="0.3" />
    </g>

    <!-- Open book on top -->
    <g class="animate-float-gentle" filter="url(#hero-shadow)">
      <path d="M160 200 Q210 185 210 140 L210 140 Q210 185 260 200 Z" fill="white" stroke="#E2E8F0" stroke-width="1" />
      <path d="M160 200 Q110 185 110 140 L110 140 Q110 185 160 200 Z" fill="#F8FAFC" stroke="#E2E8F0" stroke-width="1" />
      <line x1="125" y1="158" x2="155" y2="165" stroke="#CBD5E1" stroke-width="1.5" stroke-linecap="round" />
      <line x1="120" y1="168" x2="155" y2="175" stroke="#CBD5E1" stroke-width="1.5" stroke-linecap="round" />
      <line x1="123" y1="178" x2="155" y2="185" stroke="#CBD5E1" stroke-width="1.5" stroke-linecap="round" />
      <line x1="165" y1="165" x2="200" y2="158" stroke="#CBD5E1" stroke-width="1.5" stroke-linecap="round" />
      <line x1="165" y1="175" x2="205" y2="168" stroke="#CBD5E1" stroke-width="1.5" stroke-linecap="round" />
      <line x1="165" y1="185" x2="202" y2="178" stroke="#CBD5E1" stroke-width="1.5" stroke-linecap="round" />
    </g>

    <!-- Graduation cap -->
    <g class="animate-cap" transform="translate(300, 100)">
      <path d="M0 30 L60 10 L120 30 L60 50 Z" fill="url(#hero-cap)" />
      <path d="M60 50 L60 80" stroke="#3730A3" stroke-width="2" />
      <rect x="55" y="78" width="10" height="6" rx="2" fill="#FBBF24" />
      <path d="M20 38 L20 58 Q40 70 60 58 L60 50 L20 38Z" fill="#1E1B4B" opacity="0.8" />
      <circle cx="20" cy="58" r="3" fill="#FBBF24" />
      <line x1="20" y1="58" x2="20" y2="76" stroke="#FBBF24" stroke-width="1.5" />
      <circle cx="20" cy="78" r="4" fill="#FBBF24" />
    </g>

    <!-- Light bulb -->
    <g class="animate-bulb" transform="translate(60, 60)" filter="url(#hero-glow)">
      <ellipse cx="40" cy="42" rx="28" ry="30" fill="url(#hero-bulb)" opacity="0.2" />
      <path d="M28 50 C28 30 20 18 40 8 C60 18 52 30 52 50 Z" fill="url(#hero-bulb)" />
      <rect x="30" y="50" width="20" height="8" rx="2" fill="#D97706" />
      <rect x="32" y="58" width="16" height="4" rx="2" fill="#D97706" opacity="0.7" />
      <line x1="40" y1="20" x2="40" y2="38" stroke="white" stroke-width="2" stroke-linecap="round" opacity="0.6" />
      <line x1="33" y1="32" x2="47" y2="32" stroke="white" stroke-width="2" stroke-linecap="round" opacity="0.4" />
      <!-- Rays -->
      <line x1="40" y1="-5" x2="40" y2="-15" stroke="#FBBF24" stroke-width="2" stroke-linecap="round" opacity="0.6" />
      <line x1="60" y1="5" x2="70" y2="-2" stroke="#FBBF24" stroke-width="2" stroke-linecap="round" opacity="0.5" />
      <line x1="20" y1="5" x2="10" y2="-2" stroke="#FBBF24" stroke-width="2" stroke-linecap="round" opacity="0.5" />
      <line x1="68" y1="25" x2="78" y2="22" stroke="#FBBF24" stroke-width="2" stroke-linecap="round" opacity="0.4" />
      <line x1="12" y1="25" x2="2" y2="22" stroke="#FBBF24" stroke-width="2" stroke-linecap="round" opacity="0.4" />
    </g>

    <!-- Pencil -->
    <g class="animate-pencil" transform="translate(350, 250) rotate(-30)">
      <rect x="0" y="0" width="12" height="100" rx="2" fill="#FBBF24" />
      <rect x="0" y="0" width="12" height="100" rx="2" fill="#F59E0B" opacity="0.3" />
      <rect x="3" y="5" width="6" height="85" rx="1" fill="#FDE68A" opacity="0.5" />
      <polygon points="0,100 12,100 6,118" fill="#F5D0A9" />
      <polygon points="3,108 9,108 6,118" fill="#1E1B4B" />
      <rect x="-1" y="-8" width="14" height="10" rx="2" fill="#EC4899" />
    </g>

    <!-- Trophy -->
    <g class="animate-trophy" transform="translate(380, 150)">
      <rect x="18" y="55" width="24" height="6" rx="2" fill="#D97706" />
      <rect x="14" y="60" width="32" height="5" rx="2" fill="#B45309" />
      <path d="M15 10 Q15 45 30 50 Q45 45 45 10 Z" fill="url(#hero-bulb)" />
      <path d="M18 13 Q18 42 30 47 Q42 42 42 13 Z" fill="#FBBF24" opacity="0.4" />
      <path d="M15 10 Q5 15 8 30 Q12 35 15 30 Z" fill="#F59E0B" />
      <path d="M45 10 Q55 15 52 30 Q48 35 45 30 Z" fill="#F59E0B" />
      <text x="30" y="35" text-anchor="middle" font-size="14" font-weight="bold" fill="white" opacity="0.9">★</text>
    </g>

    <!-- Floating stars -->
    <g class="animate-star1">
      <path d="M440 80 l4 8 9 1 -7 6 2 9 -8-4 -8 4 2-9 -7-6 9-1z" fill="#FBBF24" opacity="0.7" />
    </g>
    <g class="animate-star2">
      <path d="M70 350 l3 6 7 1 -5 5 1 7 -6-3 -6 3 1-7 -5-5 7-1z" fill="#818CF8" opacity="0.6" />
    </g>
    <g class="animate-star3">
      <path d="M450 300 l3 6 7 1 -5 5 1 7 -6-3 -6 3 1-7 -5-5 7-1z" fill="#22C55E" opacity="0.5" />
    </g>

    <!-- A+ badge -->
    <g class="animate-badge" transform="translate(320, 50)">
      <circle cx="25" cy="25" r="22" fill="#4F46E5" />
      <circle cx="25" cy="25" r="19" fill="#818CF8" />
      <text x="25" y="30" text-anchor="middle" font-size="16" font-weight="bold" fill="white">A+</text>
    </g>

    <!-- Floating math symbols -->
    <text x="470" y="200" font-size="24" font-weight="bold" fill="#818CF8" opacity="0.3" class="animate-symbol1">π</text>
    <text x="30" y="280" font-size="20" font-weight="bold" fill="#22C55E" opacity="0.3" class="animate-symbol2">∑</text>
    <text x="400" y="380" font-size="22" font-weight="bold" fill="#F59E0B" opacity="0.3" class="animate-symbol3">∞</text>
    <text x="300" y="420" font-size="18" font-weight="bold" fill="#E879F9" opacity="0.25" class="animate-symbol1">△</text>

    <!-- Atom/molecule -->
    <g class="animate-atom" transform="translate(430, 400)">
      <ellipse cx="20" cy="20" rx="25" ry="10" stroke="#818CF8" stroke-width="1.5" fill="none" opacity="0.4" transform="rotate(0 20 20)" />
      <ellipse cx="20" cy="20" rx="25" ry="10" stroke="#818CF8" stroke-width="1.5" fill="none" opacity="0.4" transform="rotate(60 20 20)" />
      <ellipse cx="20" cy="20" rx="25" ry="10" stroke="#818CF8" stroke-width="1.5" fill="none" opacity="0.4" transform="rotate(120 20 20)" />
      <circle cx="20" cy="20" r="4" fill="#4F46E5" />
    </g>

    <!-- ABC letters -->
    <g class="animate-abc" transform="translate(20, 390)">
      <rect width="90" height="35" rx="12" fill="#4F46E5" opacity="0.1" />
      <text x="15" y="25" font-size="18" font-weight="800" fill="#4F46E5" opacity="0.6">ABC</text>
    </g>

    <!-- Ruler -->
    <g class="animate-ruler" transform="translate(340, 330) rotate(15)">
      <rect width="100" height="20" rx="3" fill="#38BDF8" opacity="0.7" />
      <line x1="15" y1="0" x2="15" y2="8" stroke="white" stroke-width="1" opacity="0.6" />
      <line x1="30" y1="0" x2="30" y2="12" stroke="white" stroke-width="1" opacity="0.6" />
      <line x1="45" y1="0" x2="45" y2="8" stroke="white" stroke-width="1" opacity="0.6" />
      <line x1="60" y1="0" x2="60" y2="12" stroke="white" stroke-width="1" opacity="0.6" />
      <line x1="75" y1="0" x2="75" y2="8" stroke="white" stroke-width="1" opacity="0.6" />
    </g>
  </svg>
</template>

<style scoped>
@keyframes float-gentle { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes book-stack { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
@keyframes cap-bob { 0%,100%{transform:translate(300px,100px) rotate(0)} 50%{transform:translate(300px,90px) rotate(3deg)} }
@keyframes bulb-glow { 0%,100%{opacity:1} 50%{opacity:0.85;transform:translate(60px,60px) scale(1.05)} }
@keyframes pencil-sway { 0%,100%{transform:translate(350px,250px) rotate(-30deg)} 50%{transform:translate(350px,250px) rotate(-25deg)} }
@keyframes trophy-shine { 0%,100%{transform:translate(380px,150px) scale(1)} 50%{transform:translate(380px,145px) scale(1.05)} }
@keyframes star-twinkle1 { 0%,100%{opacity:.7;transform:scale(1)} 50%{opacity:.3;transform:scale(.8)} }
@keyframes star-twinkle2 { 0%,100%{opacity:.6;transform:scale(1)} 50%{opacity:.2;transform:scale(.7)} }
@keyframes star-twinkle3 { 0%,100%{opacity:.5;transform:scale(1)} 50%{opacity:.8;transform:scale(1.2)} }
@keyframes badge-pulse { 0%,100%{transform:translate(320px,50px) scale(1)} 50%{transform:translate(320px,45px) scale(1.08)} }
@keyframes symbol-drift1 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes symbol-drift2 { 0%,100%{transform:translateX(0)} 50%{transform:translateX(8px)} }
@keyframes symbol-drift3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(5px,-8px)} }
@keyframes atom-spin { 0%{transform:translate(430px,400px) rotate(0)} 100%{transform:translate(430px,400px) rotate(360deg)} }
@keyframes abc-bounce { 0%,100%{transform:translate(20px,390px)} 50%{transform:translate(20px,384px)} }
@keyframes ruler-slide { 0%,100%{transform:translate(340px,330px) rotate(15deg)} 50%{transform:translate(340px,325px) rotate(17deg)} }

.animate-float-gentle { animation: float-gentle 5s ease-in-out infinite; }
.animate-book-stack { animation: book-stack 6s ease-in-out infinite 0.5s; }
.animate-cap { animation: cap-bob 4s ease-in-out infinite; }
.animate-bulb { animation: bulb-glow 3s ease-in-out infinite; }
.animate-pencil { animation: pencil-sway 5s ease-in-out infinite 1s; }
.animate-trophy { animation: trophy-shine 4s ease-in-out infinite 0.5s; }
.animate-star1 { animation: star-twinkle1 3s ease-in-out infinite; }
.animate-star2 { animation: star-twinkle2 4s ease-in-out infinite 1s; }
.animate-star3 { animation: star-twinkle3 3.5s ease-in-out infinite 0.5s; }
.animate-badge { animation: badge-pulse 4s ease-in-out infinite; }
.animate-symbol1 { animation: symbol-drift1 6s ease-in-out infinite; }
.animate-symbol2 { animation: symbol-drift2 5s ease-in-out infinite 1s; }
.animate-symbol3 { animation: symbol-drift3 7s ease-in-out infinite 0.5s; }
.animate-atom { animation: atom-spin 20s linear infinite; }
.animate-abc { animation: abc-bounce 5s ease-in-out infinite 0.3s; }
.animate-ruler { animation: ruler-slide 6s ease-in-out infinite 1.5s; }
</style>
