<template>
  <svg viewBox="0 0 500 480" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-auto">
    <defs>
      <linearGradient id="hn-grad1" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stop-color="#4F46E5" />
        <stop offset="100%" stop-color="#818CF8" />
      </linearGradient>
      <linearGradient id="hn-grad2" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stop-color="#22C55E" />
        <stop offset="100%" stop-color="#4ADE80" />
      </linearGradient>
      <linearGradient id="hn-grad3" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stop-color="#F59E0B" />
        <stop offset="100%" stop-color="#FBBF24" />
      </linearGradient>
      <linearGradient id="hn-screen" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="#EEF2FF" />
        <stop offset="100%" stop-color="#F8FAFC" />
      </linearGradient>
      <filter id="hn-shadow" x="-20%" y="-20%" width="140%" height="140%">
        <feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="#4F46E5" flood-opacity="0.15" />
      </filter>
    </defs>

    <!-- Central device (tablet/phone) -->
    <g class="animate-device" filter="url(#hn-shadow)">
      <rect x="130" y="100" width="240" height="320" rx="20" fill="#1E1B4B" />
      <rect x="140" y="115" width="220" height="280" rx="10" fill="url(#hn-screen)" />
      <circle cx="250" cy="108" r="3" fill="#312E81" />

      <!-- Screen content: mini dashboard -->
      <rect x="155" y="130" width="90" height="40" rx="8" fill="white" />
      <rect x="163" y="140" width="30" height="6" rx="3" fill="#4F46E5" opacity="0.3" />
      <rect x="163" y="152" width="50" height="8" rx="3" fill="#4F46E5" />

      <rect x="255" y="130" width="90" height="40" rx="8" fill="white" />
      <rect x="263" y="140" width="30" height="6" rx="3" fill="#22C55E" opacity="0.3" />
      <rect x="263" y="152" width="45" height="8" rx="3" fill="#22C55E" />

      <!-- Mini chart bars -->
      <rect x="155" y="180" width="190" height="80" rx="8" fill="white" />
      <rect x="170" y="232" width="18" height="18" rx="3" fill="url(#hn-grad1)" opacity="0.5" />
      <rect x="196" y="222" width="18" height="28" rx="3" fill="url(#hn-grad1)" opacity="0.65" />
      <rect x="222" y="212" width="18" height="38" rx="3" fill="url(#hn-grad1)" opacity="0.8" />
      <rect x="248" y="205" width="18" height="45" rx="3" fill="url(#hn-grad1)" />
      <rect x="274" y="215" width="18" height="35" rx="3" fill="url(#hn-grad1)" opacity="0.7" />
      <rect x="300" y="225" width="18" height="25" rx="3" fill="url(#hn-grad1)" opacity="0.55" />

      <!-- Mini list items -->
      <rect x="155" y="270" width="190" height="24" rx="6" fill="white" />
      <circle cx="170" cy="282" r="5" fill="#DCFCE7" />
      <rect x="182" y="278" width="60" height="5" rx="2" fill="#334155" opacity="0.3" />
      <rect x="320" y="278" width="16" height="5" rx="2" fill="#22C55E" />

      <rect x="155" y="300" width="190" height="24" rx="6" fill="white" />
      <circle cx="170" cy="312" r="5" fill="#EEF2FF" />
      <rect x="182" y="308" width="50" height="5" rx="2" fill="#334155" opacity="0.3" />
      <rect x="320" y="308" width="16" height="5" rx="2" fill="#818CF8" />

      <rect x="155" y="330" width="190" height="24" rx="6" fill="white" />
      <circle cx="170" cy="342" r="5" fill="#FEF3C7" />
      <rect x="182" y="338" width="55" height="5" rx="2" fill="#334155" opacity="0.3" />
      <rect x="320" y="338" width="16" height="5" rx="2" fill="#F59E0B" />

      <!-- Home indicator -->
      <rect x="220" y="400" width="60" height="4" rx="2" fill="#312E81" />
    </g>

    <!-- Floating card: top right -->
    <g class="animate-card1" filter="url(#hn-shadow)">
      <rect x="380" y="80" width="110" height="60" rx="14" fill="white" />
      <circle cx="400" cy="105" r="12" fill="#EEF2FF" />
      <rect x="392" y="101" width="16" height="8" rx="2" fill="url(#hn-grad1)" />
      <rect x="420" y="97" width="55" height="5" rx="2" fill="#334155" opacity="0.4" />
      <rect x="420" y="108" width="40" height="5" rx="2" fill="#4F46E5" opacity="0.6" />
    </g>

    <!-- Floating card: left side -->
    <g class="animate-card2" filter="url(#hn-shadow)">
      <rect x="10" y="200" width="110" height="60" rx="14" fill="white" />
      <circle cx="30" cy="225" r="12" fill="#DCFCE7" />
      <rect x="22" y="221" width="16" height="8" rx="2" fill="url(#hn-grad2)" />
      <rect x="50" y="217" width="55" height="5" rx="2" fill="#334155" opacity="0.4" />
      <rect x="50" y="228" width="40" height="5" rx="2" fill="#22C55E" opacity="0.6" />
    </g>

    <!-- Floating badge: bottom right -->
    <g class="animate-card3">
      <circle cx="420" cy="350" r="28" fill="url(#hn-grad3)" opacity="0.15" />
      <circle cx="420" cy="350" r="18" fill="url(#hn-grad3)" />
      <text x="420" y="355" text-anchor="middle" font-size="14" font-weight="bold" fill="white">★</text>
    </g>

    <!-- Decorative hexagons -->
    <g class="animate-hex1" opacity="0.15">
      <polygon points="70,80 90,70 110,80 110,100 90,110 70,100" fill="none" stroke="#4F46E5" stroke-width="1.5" />
    </g>
    <g class="animate-hex2" opacity="0.12">
      <polygon points="400,250 415,242 430,250 430,266 415,274 400,266" fill="none" stroke="#22C55E" stroke-width="1.5" />
    </g>

    <!-- Floating dots / nodes network -->
    <circle cx="60" cy="160" r="4" fill="#818CF8" opacity="0.4" class="animate-dot1" />
    <circle cx="440" cy="180" r="3" fill="#22C55E" opacity="0.3" class="animate-dot2" />
    <circle cx="50" cy="350" r="3.5" fill="#F59E0B" opacity="0.35" class="animate-dot3" />
    <circle cx="460" cy="420" r="3" fill="#818CF8" opacity="0.3" class="animate-dot1" />
    <circle cx="80" cy="440" r="2.5" fill="#22C55E" opacity="0.25" class="animate-dot2" />

    <!-- Connection lines -->
    <line x1="60" y1="160" x2="130" y2="200" stroke="#818CF8" stroke-width="0.8" opacity="0.15" class="animate-line1" />
    <line x1="370" y1="200" x2="440" y2="180" stroke="#22C55E" stroke-width="0.8" opacity="0.15" class="animate-line2" />
    <line x1="370" y1="350" x2="420" y2="350" stroke="#F59E0B" stroke-width="0.8" opacity="0.15" class="animate-line1" />

    <!-- Abstract ring -->
    <circle cx="460" cy="100" r="20" fill="none" stroke="#818CF8" stroke-width="1" opacity="0.1" class="animate-ring" />
    <circle cx="460" cy="100" r="12" fill="none" stroke="#818CF8" stroke-width="1.5" opacity="0.15" class="animate-ring" />

    <!-- Small plus signs -->
    <g opacity="0.2" class="animate-dot3">
      <line x1="30" y1="120" x2="30" y2="132" stroke="#4F46E5" stroke-width="1.5" stroke-linecap="round" />
      <line x1="24" y1="126" x2="36" y2="126" stroke="#4F46E5" stroke-width="1.5" stroke-linecap="round" />
    </g>
    <g opacity="0.15" class="animate-dot1">
      <line x1="470" y1="300" x2="470" y2="312" stroke="#22C55E" stroke-width="1.5" stroke-linecap="round" />
      <line x1="464" y1="306" x2="476" y2="306" stroke="#22C55E" stroke-width="1.5" stroke-linecap="round" />
    </g>
  </svg>
</template>

<style scoped>
@keyframes device-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes card1-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes card2-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes card3-float { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-10px) scale(1.05)} }
@keyframes hex1-rotate { 0%,100%{transform:rotate(0)} 50%{transform:rotate(15deg)} }
@keyframes hex2-rotate { 0%,100%{transform:rotate(0)} 50%{transform:rotate(-10deg)} }
@keyframes dot-drift1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(5px,-8px)} }
@keyframes dot-drift2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-6px,5px)} }
@keyframes dot-drift3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(4px,7px)} }
@keyframes line-pulse1 { 0%,100%{opacity:.15} 50%{opacity:.3} }
@keyframes line-pulse2 { 0%,100%{opacity:.15} 50%{opacity:.25} }
@keyframes ring-pulse { 0%,100%{transform:scale(1);opacity:.1} 50%{transform:scale(1.1);opacity:.2} }

.animate-device { animation: device-float 6s ease-in-out infinite; }
.animate-card1 { animation: card1-float 5s ease-in-out infinite 0.5s; }
.animate-card2 { animation: card2-float 4.5s ease-in-out infinite 1s; }
.animate-card3 { animation: card3-float 5.5s ease-in-out infinite 0.8s; }
.animate-hex1 { animation: hex1-rotate 8s ease-in-out infinite; transform-origin: 90px 90px; }
.animate-hex2 { animation: hex2-rotate 7s ease-in-out infinite 1s; transform-origin: 415px 258px; }
.animate-dot1 { animation: dot-drift1 6s ease-in-out infinite; }
.animate-dot2 { animation: dot-drift2 5s ease-in-out infinite 1s; }
.animate-dot3 { animation: dot-drift3 7s ease-in-out infinite 0.5s; }
.animate-line1 { animation: line-pulse1 4s ease-in-out infinite; }
.animate-line2 { animation: line-pulse2 5s ease-in-out infinite 1s; }
.animate-ring { animation: ring-pulse 4s ease-in-out infinite; transform-origin: 460px 100px; }
</style>
