<template>
  <Transition name="splash-fade">
    <div v-if="showSplash" class="splash-screen">
      <div class="splash-content">
        <svg 
          width="600" 
          height="320" 
          viewBox="0 0 2051 1099" 
          fill="none" 
          xmlns="http://www.w3.org/2000/svg"
          class="splash-logo"
        >
          <!-- Decorative Diagonal Shape 1 -->
          <path 
            class="logo-stroke deco-stroke-1"
            d="M48.7775 647.241L0.239258 364.582L350.626 304.395L634.938 546.554L48.7775 647.241Z" 
            stroke="url(#splash_paint0)" 
            stroke-width="6"
            fill="transparent"
          />
          <path 
            class="logo-fill deco-fill-1"
            d="M48.7775 647.241L0.239258 364.582L350.626 304.395L634.938 546.554L48.7775 647.241Z" 
            fill="url(#splash_paint0)"
          />

          <!-- Decorative Diagonal Shape 2 -->
          <path 
            class="logo-stroke deco-stroke-2"
            d="M605.933 260.538L895.592 501.778L1172.25 454.254L877.513 213.887L605.933 260.538Z" 
            stroke="url(#splash_paint1)" 
            stroke-width="6"
            fill="transparent"
          />
          <path 
            class="logo-fill deco-fill-2"
            d="M605.933 260.538L895.592 501.778L1172.25 454.254L877.513 213.887L605.933 260.538Z" 
            fill="url(#splash_paint1)"
          />

          <!-- Decorative Diagonal Shape 3 -->
          <path 
            class="logo-stroke deco-stroke-3"
            d="M1123.72 171.595L1415.65 412.445L1694.92 364.474L1397.86 124.504L1123.72 171.595Z" 
            stroke="url(#splash_paint2)" 
            stroke-width="6"
            fill="transparent"
          />
          <path 
            class="logo-fill deco-fill-3"
            d="M1123.72 171.595L1415.65 412.445L1694.92 364.474L1397.86 124.504L1123.72 171.595Z" 
            fill="url(#splash_paint2)"
          />

          <!-- Decorative Diagonal Shape 4 -->
          <path 
            class="logo-stroke deco-stroke-4"
            d="M1978.53 24.7578L1646.37 81.8147L1943.39 321.789L2027.06 307.417L1978.53 24.7578Z" 
            stroke="url(#splash_paint3)" 
            stroke-width="6"
            fill="transparent"
          />
          <path 
            class="logo-fill deco-fill-4"
            d="M1978.53 24.7578L1646.37 81.8147L1943.39 321.789L2027.06 307.417L1978.53 24.7578Z" 
            fill="url(#splash_paint3)"
          />

          <!-- Text: I -->
          <path 
            class="text-letter text-letter-1"
            d="M48.9072 1093.3V779.537H121.443V1093.3H48.9072Z" 
            fill="white"
          />

          <!-- Text: n -->
          <path 
            class="text-letter text-letter-2"
            d="M399.801 1093.29H329.106V965.131C329.106 950.034 326.161 938.984 319.901 932.356C314.011 925.36 306.278 922.044 297.073 922.044C290.446 922.044 283.818 923.887 277.19 927.2C270.563 930.516 264.303 935.301 258.78 941.195C253.257 947.085 249.207 954.085 246.261 961.815V1092.92H175.566V863.489H239.266V902.525C245.157 893.319 252.521 885.218 261.358 878.956C270.195 872.698 280.504 867.91 291.919 864.594C303.333 861.281 315.851 859.809 329.106 859.809C344.571 859.809 356.724 862.387 365.929 867.542C375.134 872.698 382.129 879.694 387.284 888.163C392.068 896.635 395.384 906.209 397.223 916.153C399.066 926.465 399.801 936.039 399.801 945.98V1093.29Z" 
            fill="white"
          />

          <!-- Text: d -->
          <path 
            class="text-letter text-letter-3"
            d="M432.951 978.757C432.951 956.663 437.368 936.775 446.206 918.732C455.044 900.686 467.194 886.691 482.288 876.379C497.386 866.071 515.429 860.544 535.311 860.544C551.511 860.544 566.239 864.228 579.497 871.961C592.752 879.695 602.691 889.637 609.689 902.526V770.689H680.384V1014.48C680.384 1021.48 681.486 1026.63 683.697 1029.58C685.907 1032.53 689.957 1034 695.846 1034.37V1093.29C683.329 1095.5 673.019 1096.97 665.287 1096.97C652.766 1096.97 643.194 1094.39 635.832 1088.87C628.467 1083.71 624.049 1076.35 622.206 1066.77L621.472 1054.99C613.001 1069.35 601.586 1080.03 587.597 1087.39C573.604 1094.39 558.509 1098.08 543.044 1098.08C527.579 1098.08 512.481 1095.13 499.226 1089.24C485.971 1083.34 474.189 1074.88 464.249 1064.2C454.306 1053.52 446.941 1040.99 441.418 1026.63C436.263 1012.27 433.319 996.435 433.319 979.127L432.951 978.757ZM610.057 1006.75V959.241C607.112 951.507 603.062 944.879 597.536 938.985C592.014 933.094 585.754 928.673 579.126 924.99C572.499 921.31 565.504 919.467 558.509 919.467C550.406 919.467 543.411 921.31 536.784 924.623C530.156 927.938 524.634 932.357 520.214 937.88C515.796 943.406 512.114 949.664 509.536 956.663C506.959 963.659 505.854 971.761 505.854 979.862C505.854 987.966 507.329 995.697 509.907 1002.7C512.851 1009.69 516.534 1015.59 521.319 1020.74C526.106 1025.89 531.996 1029.95 538.994 1032.89C545.989 1035.84 553.354 1037.31 561.454 1037.31C566.609 1037.31 571.394 1036.58 576.181 1035.1C580.969 1033.63 585.386 1031.42 589.804 1028.47C594.224 1025.53 597.907 1022.21 601.586 1018.53C605.269 1014.85 608.217 1010.43 610.424 1005.64L610.057 1006.75Z" 
            fill="white"
          />

          <!-- Text: e (first) -->
          <path 
            class="text-letter text-letter-4"
            d="M846.059 1097.72C826.176 1097.72 808.868 1094.4 793.406 1088.51C777.941 1082.25 765.053 1073.78 754.376 1063.1C743.698 1052.42 735.595 1039.9 729.706 1025.9C724.183 1011.91 721.235 996.811 721.235 981.71C721.235 959.617 726.023 939.361 735.966 921.315C745.905 903.272 759.898 888.54 778.676 877.493C797.456 866.443 819.546 860.92 845.688 860.92C871.831 860.92 894.294 866.443 912.704 877.126C931.114 888.172 945.474 902.535 955.046 920.58C964.619 938.623 969.406 957.774 969.406 978.765C969.406 982.815 969.406 986.866 968.669 990.917C968.301 994.967 967.934 998.283 967.564 1001.23H795.981C796.718 1011.17 799.296 1019.64 804.451 1026.64C809.606 1033.64 815.866 1038.79 823.599 1042.11C831.328 1045.42 839.061 1047.26 847.531 1047.26C858.576 1047.26 868.519 1044.68 877.724 1039.9C886.929 1034.74 893.189 1028.11 896.501 1020.01L956.519 1037.32C950.626 1049.47 942.526 1059.78 931.849 1068.99C921.171 1078.2 908.651 1085.19 893.923 1090.72C879.196 1096.24 863.364 1098.82 845.688 1098.82L846.059 1097.72ZM895.396 957.039C894.661 947.832 891.716 939.361 886.929 932.732C882.141 925.736 876.251 920.21 869.253 916.53C862.258 912.846 853.791 910.636 844.586 910.636C836.116 910.636 828.016 912.479 820.651 916.53C813.289 920.21 807.396 925.736 802.978 932.365C798.558 938.993 795.984 947.462 794.878 957.039H895.396Z" 
            fill="white"
          />

          <!-- Text: e (second) -->
          <path 
            class="text-letter text-letter-5"
            d="M1113.02 1097.72C1093.13 1097.72 1075.83 1094.4 1060.36 1088.51C1044.9 1082.25 1032.01 1073.78 1021.33 1063.1C1010.66 1052.42 1002.55 1039.9 996.664 1025.9C991.141 1011.91 988.196 996.811 988.196 981.71C988.196 959.617 992.981 939.361 1002.92 921.315C1012.86 903.272 1026.86 888.54 1045.63 877.493C1064.41 866.443 1086.51 860.92 1112.65 860.92C1138.79 860.92 1161.25 866.443 1179.66 877.126C1198.07 888.172 1212.43 902.535 1222 920.58C1231.58 938.623 1236.36 957.774 1236.36 978.765C1236.36 982.815 1236.36 986.866 1235.63 990.917C1235.26 994.967 1234.89 998.283 1234.52 1001.23H1062.94C1063.68 1011.17 1066.25 1019.64 1071.41 1026.64C1076.56 1033.64 1082.82 1038.79 1090.56 1042.11C1098.29 1045.42 1106.02 1047.26 1114.49 1047.26C1125.53 1047.26 1135.48 1044.68 1144.68 1039.9C1153.89 1034.74 1160.15 1028.11 1163.46 1020.01L1223.48 1037.32C1217.59 1049.47 1209.48 1059.78 1198.81 1068.99C1188.13 1078.2 1175.61 1085.19 1160.88 1090.72C1146.15 1096.24 1130.32 1098.82 1112.65 1098.82L1113.02 1097.72ZM1162.35 957.039C1161.62 947.832 1158.67 939.361 1153.89 932.732C1149.1 925.736 1143.21 920.21 1136.21 916.53C1129.22 912.846 1120.75 910.636 1111.54 910.636C1103.07 910.636 1094.97 912.479 1087.61 916.53C1080.25 920.21 1074.35 925.736 1069.94 932.365C1065.52 938.993 1062.94 947.462 1061.84 957.039H1162.35Z" 
            fill="white"
          />

          <!-- Text: H -->
          <path 
            class="text-letter text-letter-6"
            d="M1472.01 779.537V1093.3H1399.48V964.773H1274.29V1093.3H1201.75V779.537H1274.29V901.065H1399.48V779.537H1472.01Z" 
            fill="white"
          />

          <!-- Text: u -->
          <path 
            class="text-letter text-letter-7"
            d="M1523.57 863.854H1594.26V995.323C1594.26 1008.95 1597.21 1019.63 1602.73 1026.99C1608.62 1034.36 1616.35 1038.04 1626.66 1038.04C1633.29 1038.04 1639.18 1036.94 1645.07 1034.73C1650.96 1032.52 1656.85 1029.2 1662.38 1024.42C1667.9 1019.63 1673.06 1013 1677.47 1005.26V864.221H1748.17V1015.21C1748.17 1022.2 1749.27 1026.99 1751.48 1029.94C1753.69 1032.89 1757.74 1034.36 1763.27 1034.73V1093.65C1756.64 1095.12 1751.11 1096.23 1746.33 1096.59C1741.54 1096.96 1737.12 1096.96 1733.44 1096.59C1720.92 1096.59 1711.35 1094.38 1703.98 1089.6C1696.62 1084.81 1692.2 1077.45 1690.36 1067.87L1688.89 1053.88C1678.21 1068.98 1665.32 1080.02 1649.49 1087.39C1634.03 1094.38 1616.35 1098.07 1596.47 1098.07C1572.9 1098.07 1554.86 1090.7 1542.34 1075.97C1529.83 1061.24 1523.57 1039.88 1523.57 1011.53V863.854Z" 
            fill="white"
          />

          <!-- Text: b -->
          <path 
            class="text-letter text-letter-8"
            d="M1942.58 1097.71C1924.91 1097.71 1909.44 1094.02 1896.56 1086.66C1883.3 1079.29 1872.99 1068.61 1864.89 1054.99V1093.29H1803.4V770.689H1874.1V902.526C1881.83 889.269 1892.14 878.957 1904.66 871.594C1917.54 864.228 1932.64 860.544 1950.31 860.544C1964.67 860.544 1977.93 863.493 1990.45 869.383C2002.97 875.277 2013.28 883.746 2022.11 894.792C2030.95 905.842 2037.95 918.732 2043.1 933.094C2048.26 947.457 2050.47 963.292 2050.47 979.862C2050.47 996.435 2047.89 1011.53 2042.36 1026.27C2036.84 1040.99 2029.48 1053.52 2019.54 1064.2C2009.96 1074.88 1998.55 1083.34 1985.29 1089.24C1972.04 1095.13 1957.68 1098.08 1942.21 1098.08L1942.58 1097.71ZM1922.7 1038.05C1930.8 1038.05 1938.53 1036.58 1945.16 1033.63C1951.79 1030.68 1957.68 1026.63 1962.46 1021.48C1967.62 1016.32 1971.3 1010.06 1974.25 1003.06C1977.19 996.067 1978.3 988.334 1978.3 980.6C1978.3 969.55 1976.09 959.609 1971.67 950.402C1967.25 941.196 1960.99 933.829 1953.26 928.306C1945.53 922.783 1936.32 919.837 1926.38 919.837C1919.02 919.837 1912.02 921.677 1905.03 925.361C1898.4 929.044 1892.14 933.829 1886.98 939.723C1881.83 945.614 1877.41 952.242 1874.1 959.609V1007.48C1876.31 1011.9 1879.25 1016.32 1882.93 1020.37C1886.61 1024.42 1890.3 1027.37 1894.72 1030.32C1899.13 1032.89 1903.55 1035.1 1908.34 1036.58C1913.13 1038.05 1917.91 1038.78 1922.7 1038.78V1038.05Z" 
            fill="white"
          />

          <defs>
            <linearGradient id="splash_paint0" x1="245.48" y1="59.5055" x2="2566.89" y2="563.412" gradientUnits="userSpaceOnUse">
              <stop stop-color="#F0003D"/>
              <stop offset="0.369792" stop-color="#FA4727"/>
              <stop offset="0.776042" stop-color="#6B90F4"/>
            </linearGradient>
            <linearGradient id="splash_paint1" x1="245.48" y1="59.5063" x2="2566.89" y2="563.412" gradientUnits="userSpaceOnUse">
              <stop stop-color="#F0003D"/>
              <stop offset="0.369792" stop-color="#FA4727"/>
              <stop offset="0.776042" stop-color="#6B90F4"/>
            </linearGradient>
            <linearGradient id="splash_paint2" x1="245.48" y1="59.5046" x2="2566.89" y2="563.411" gradientUnits="userSpaceOnUse">
              <stop stop-color="#F0003D"/>
              <stop offset="0.369792" stop-color="#FA4727"/>
              <stop offset="0.776042" stop-color="#6B90F4"/>
            </linearGradient>
            <linearGradient id="splash_paint3" x1="1793.47" y1="-187.406" x2="3219.26" y2="26.8634" gradientUnits="userSpaceOnUse">
              <stop stop-color="#F0003D"/>
              <stop offset="0.369792" stop-color="#FA4727"/>
              <stop offset="0.776042" stop-color="#6B90F4"/>
            </linearGradient>
          </defs>
        </svg>
      </div>
    </div>
  </Transition>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const SPLASH_KEY = 'indeedhub_splash_shown'
const alreadyShown = sessionStorage.getItem(SPLASH_KEY) === 'true'
const showSplash = ref(!alreadyShown)

onMounted(() => {
  if (showSplash.value) {
    sessionStorage.setItem(SPLASH_KEY, 'true')
    // Hide splash after animation completes (5s total animation)
    setTimeout(() => {
      showSplash.value = false
    }, 5000)
  }
})
</script>

<style scoped>
.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
}

.splash-content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
}

.splash-logo {
  width: 280px;
  height: auto;
}

@media (min-width: 768px) {
  .splash-logo {
    width: 600px;
  }
}

@media (min-width: 1280px) {
  .splash-logo {
    width: 800px;
  }
}

/* ========================================
   Decorative shapes - Stroke drawing animation
   ======================================== */
.logo-stroke {
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  fill: transparent;
}

/* Staggered draw-in from left to right */
.deco-stroke-1 {
  animation: drawStroke 1.2s ease-out 0s forwards, undrawStroke 1.2s ease-in 3.4s forwards;
}

.deco-stroke-2 {
  animation: drawStroke 1.2s ease-out 0.2s forwards, undrawStroke 1.2s ease-in 3.2s forwards;
}

.deco-stroke-3 {
  animation: drawStroke 1.2s ease-out 0.4s forwards, undrawStroke 1.2s ease-in 3.0s forwards;
}

.deco-stroke-4 {
  animation: drawStroke 1.2s ease-out 0.6s forwards, undrawStroke 1.2s ease-in 2.8s forwards;
}

@keyframes drawStroke {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes undrawStroke {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 3000;
  }
}

/* ========================================
   Decorative shapes - Fill animation
   ======================================== */
.logo-fill {
  opacity: 0;
}

.deco-fill-1 {
  animation: fillAppear 0.6s ease-out 0.8s forwards, fillDisappear 0.6s ease-in 3.6s forwards;
}

.deco-fill-2 {
  animation: fillAppear 0.6s ease-out 1.0s forwards, fillDisappear 0.6s ease-in 3.4s forwards;
}

.deco-fill-3 {
  animation: fillAppear 0.6s ease-out 1.2s forwards, fillDisappear 0.6s ease-in 3.2s forwards;
}

.deco-fill-4 {
  animation: fillAppear 0.6s ease-out 1.4s forwards, fillDisappear 0.6s ease-in 3.0s forwards;
}

@keyframes fillAppear {
  to {
    opacity: 1;
  }
}

@keyframes fillDisappear {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* ========================================
   Text letters - Fade in one by one, then out
   ======================================== */
.text-letter {
  opacity: 0;
}

/* Letters appear sequentially after the decorative shapes start filling */
.text-letter-1 {
  animation: letterIn 0.4s ease-out 1.0s forwards, letterOut 0.4s ease-in 3.8s forwards;
}

.text-letter-2 {
  animation: letterIn 0.4s ease-out 1.1s forwards, letterOut 0.4s ease-in 3.7s forwards;
}

.text-letter-3 {
  animation: letterIn 0.4s ease-out 1.2s forwards, letterOut 0.4s ease-in 3.6s forwards;
}

.text-letter-4 {
  animation: letterIn 0.4s ease-out 1.3s forwards, letterOut 0.4s ease-in 3.5s forwards;
}

.text-letter-5 {
  animation: letterIn 0.4s ease-out 1.4s forwards, letterOut 0.4s ease-in 3.4s forwards;
}

.text-letter-6 {
  animation: letterIn 0.4s ease-out 1.5s forwards, letterOut 0.4s ease-in 3.3s forwards;
}

.text-letter-7 {
  animation: letterIn 0.4s ease-out 1.6s forwards, letterOut 0.4s ease-in 3.2s forwards;
}

.text-letter-8 {
  animation: letterIn 0.4s ease-out 1.7s forwards, letterOut 0.4s ease-in 3.1s forwards;
}

@keyframes letterIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes letterOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* ========================================
   Splash screen fade-out transition
   ======================================== */
.splash-fade-leave-active {
  transition: opacity 1.5s ease;
}

.splash-fade-leave-to {
  opacity: 0;
}
</style>
