<template>
  <section class="text-center grid gap-8 md:gap-4">
    <!--Section Title-->
    <h2 class="main-title text-white px-4">
      Kickstart your
      <span class="text-primary whitespace-nowrap">design system</span>
    </h2>
    <!--Section Subtitle-->
    <p class="text-lg text-white p-4 mb-4 leading-relaxed">
      <a class="text-primary" href="/">Backlight</a>
      provides design system examples to help you jump in.
      <br />
      Select the one with your preferred technology or
      <a href="/edit/dsPyB9DWNnBvDP17EMGC" class="text-primary">
        start from scratch
      </a>
    </p>
    <!--design system cards container-->
    <div class="bg-black-divriots py-40 mt-64"></div>
    <div id="highlight-wrapper">
      <!--Paddles for horizontal scrolling, will not show if all cards are already visible on screen-->
      <svg
        id="highlight-left-paddle"
        tabindex="0"
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        viewBox="0 0 16 16"
        fill="currentColor"
      >
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M5.928 7.976l4.357 4.357-.618.62L5 8.284v-.618L9.667 3l.618.619-4.357 4.357z"
        />
      </svg>

      <div id="highlight-container">
        <!--design system cards (data.js)-->
        <component
          :is="StarterCard"
          v-for="kit of kits.filter(({ highlight }) => !highlight)"
          :key="kit.name"
          v-bind="kit"
          actionDescription="Get started"
        >
          <div v-html="kit.desc" />
        </component>

        <!--Cards stacked effect on "many more" card-->
        <div class="relative" style="padding-right: 30px">
          <!--"... and many more" card (LOTS of SVGs in here)-->
          <component
            :is="Card"
            url="/signin?redirect=/starterkits"
            style="background-color: #212121; z-index: 4"
            actionDescription="Explore"
          >
            <div
              class="w-full h-full text-2xl sm:text-3xl"
              style="
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
              "
            >
              <!--Top left SVG +-->
              <svg
                width="60"
                height="60"
                viewBox="0 0 16 16"
                xmlns="http://www.w3.org/2000/svg"
                fill="currentColor"
              >
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M1.5 1h12l.5.5v12l-.5.5h-12l-.5-.5v-12l.5-.5zM2 13h11V2H2v11z"
                />
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M8 4H7v3H4v1h3v3h1V8h3V7H8V4z"
                />
              </svg>

              <header>... and many more!</header>

              <!--Logos of other tech-->
              <div class="flex flex-wrap">
                <div class="flex my-2">
                  <!--Sass-->
                  <svg
                    width="35"
                    height="35"
                    class="mr-1 md:mr-2 fill-current"
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 547.77 410.59"
                  >
                    <path
                      class="cls-1"
                      d="M503.6,430.16A112.66,112.66,0,0,0,454,441.71c-5.08-10.15-10.23-19.07-11.09-25.71-1-7.75-2.18-12.37-1-21.6s6.56-22.3,6.48-23.28-1.2-5.68-12.24-5.76-20.49,2.12-21.6,5A109.19,109.19,0,0,0,410,386.72c-1.93,10-22.05,45.72-33.47,64.4-3.73-7.29-6.91-13.72-7.57-18.8-1-7.75-2.18-12.37-1-21.6s6.56-22.3,6.48-23.28-1.2-5.68-12.24-5.76-20.49,2.12-21.6,5-2.3,9.73-4.56,16.32-29,66.16-36,81.6c-3.57,7.87-6.67,14.19-8.87,18.5v0s-.13.29-.37.77c-1.87,3.68-3,5.71-3,5.71l0,.08c-1.49,2.69-3.08,5.2-3.87,5.2-.55,0-1.66-7.18.24-17,4-20.66,13.54-52.89,13.44-54-.05-.57,1.78-6.18-6.24-9.12-7.79-2.85-10.57,1.9-11.28,1.92s-1.2,1.68-1.2,1.68,8.68-36.24-16.56-36.24c-15.78,0-37.65,17.26-48.42,32.91-6.8,3.71-21.35,11.65-36.78,20.13l-17.71,9.75c-.39-.44-.78-.87-1.18-1.3-30.61-32.65-87.19-55.75-84.79-99.65.87-16,6.42-58,108.72-109,83.8-41.76,150.89-30.27,162.48-4.8,16.56,36.38-35.85,104-122.88,113.76-33.16,3.72-50.62-9.13-55-13.92-4.57-5-5.25-5.27-7-4.32-2.78,1.54-1,6,0,8.64,2.6,6.76,13.26,18.75,31.44,24.72,16,5.25,54.92,8.13,102-10.08,52.73-20.4,93.9-77.13,81.81-124.56-12.3-48.24-92.28-64.09-168-37.2-45,16-93.82,41.12-128.88,73.92-41.69,39-48.34,72.94-45.6,87.12,9.73,50.39,79.19,83.21,107,107.53l-3.83,2.11C122,484.78,69,512.48,55.76,541.76c-15,33.21,2.39,57,13.92,60.24,35.72,9.94,72.37-7.94,92.07-37.32S179,497.06,170,479.6c-.11-.22-.24-.43-.35-.64,3.6-2.14,7.27-4.3,10.91-6.44,7.1-4.17,14.06-8,20.11-11.34-3.38,9.26-5.86,20.37-7.15,36.42-1.51,18.85,6.21,43.21,16.32,52.8,4.45,4.22,9.81,4.32,13.2,4.32,11.76,0,17.13-9.79,23-21.36,7.25-14.2,13.68-30.72,13.68-30.72s-8.07,44.64,13.92,44.64c8,0,16.07-10.39,19.66-15.69l0,.09.62-1c.83-1.27,1.3-2.08,1.3-2.08a2.32,2.32,0,0,0,0-.23c3.22-5.59,10.37-18.34,21.08-39.37,13.84-27.17,27.12-61.2,27.12-61.2a180.7,180.7,0,0,0,5.28,22.08c2.38,8.1,7.44,17,11.42,25.63-3.21,4.45-5.18,7-5.18,7l0,.13c-2.56,3.41-5.44,7.09-8.45,10.67-10.92,13-23.94,27.87-25.68,32.16-2,5-1.57,8.77,2.4,11.76,2.9,2.18,8.06,2.52,13.44,2.16a61.23,61.23,0,0,0,20.13-4.58,67.66,67.66,0,0,0,17.31-9.1c10.72-7.88,17.18-19.15,16.56-34.08-.34-8.23-3-16.38-6.29-24.08,1-1.4,1.95-2.81,2.93-4.24a458.46,458.46,0,0,0,30-51.84,180.7,180.7,0,0,0,5.28,22.08c2,7,6.09,14.56,9.72,22-15.89,12.91-25.74,27.91-29.16,37.75-6.32,18.2-1.37,26.44,7.92,28.32,4.21.85,10.15-1.08,14.63-3a67.89,67.89,0,0,0,18.49-9.51c10.72-7.88,21-18.91,20.4-33.84a63.39,63.39,0,0,0-4.63-20c13.47-5.61,30.9-8.73,53.11-6.14,47.64,5.56,57,35.31,55.2,47.76s-11.78,19.29-15.12,21.36-4.36,2.78-4.08,4.32c.41,2.23,1.95,2.15,4.8,1.67,3.92-.66,25-10.13,25.92-33.11C581.07,461.94,553.11,429.9,503.6,430.16ZM136.39,554c-15.78,17.21-37.83,23.72-47.28,18.24-10.21-5.92-6.17-31.26,13.2-49.53,11.8-11.13,27-21.39,37.15-27.7l9.78-5.88,1.07-.61,0,0,2.45-1.46C159.78,513,153,535.89,136.39,554Zm115-78.15c-5.5,13.4-17,47.67-24,45.84-6-1.58-9.67-27.64-1.2-53.28,4.26-12.91,13.37-28.34,18.72-34.32,8.61-9.64,18.1-12.79,20.4-8.88C268.21,430.14,254.8,467.41,251.35,475.81Zm95,45.31c-2.33,1.22-4.47,2-5.46,1.4-.73-.44,1-2,1-2s11.88-12.78,16.56-18.6c2.72-3.39,5.88-7.4,9.32-11.9,0,.45,0,.9,0,1.34C367.71,506.63,352.92,517,346.33,521.12Zm73.17-16.67c-1.74-1.24-1.45-5.24,4.26-17.69a67,67,0,0,1,16.27-21,30.25,30.25,0,0,1,1.64,9.23C441.55,494.26,427.81,501.46,419.5,504.45Z"
                      transform="translate(-32.18 -194.17)"
                    />
                  </svg>
                  <!--Angular-->
                  <svg
                    width="35"
                    height="35"
                    class="mr-1 md:mr-2 fill-current"
                    viewBox="0 0 128 128"
                  >
                    <path
                      d="M52.864 64h23.28L63.769 38.123zM63.81 1.026L4.553 21.88l9.363 77.637 49.957 27.457 50.214-27.828 9.36-77.635L63.81 1.026zM48.044 75l-7.265 18.176-13.581.056 36.608-81.079-.07-.153h-.064l.001-.133.063.133h.141l.123-.274V12h-.124l-.069.153 38.189 81.417-13.074-.287-8.042-18.58-17.173.082"
                    ></path>
                  </svg>
                  <!--Tailwind-->
                  <svg
                    width="35"
                    height="35"
                    class="mr-1 md:mr-2 fill-current"
                    viewBox="0 0 128 128"
                  >
                    <path
                      d="M64.004 25.602c-17.067 0-27.73 8.53-32 25.597 6.398-8.531 13.867-11.73 22.398-9.597 4.871 1.214 8.352 4.746 12.207 8.66C72.883 56.629 80.145 64 96.004 64c17.066 0 27.73-8.531 32-25.602-6.399 8.536-13.867 11.735-22.399 9.602-4.87-1.215-8.347-4.746-12.207-8.66-6.27-6.367-13.53-13.738-29.394-13.738zM32.004 64c-17.066 0-27.73 8.531-32 25.602C6.402 81.066 13.87 77.867 22.402 80c4.871 1.215 8.352 4.746 12.207 8.66 6.274 6.367 13.536 13.738 29.395 13.738 17.066 0 27.73-8.53 32-25.597-6.399 8.531-13.867 11.73-22.399 9.597-4.87-1.214-8.347-4.746-12.207-8.66C55.128 71.371 47.868 64 32.004 64zm0 0"
                    ></path>
                  </svg>
                  <!--Storybook-->
                  <svg
                    width="35"
                    height="35"
                    class="mr-1 md:mr-2 fill-current"
                    viewBox="0 0 128 128"
                  >
                    <path
                      d="M107.346 2.012l-6.914.431.539 14.377c.028.795-.889 1.259-1.514.766l-4.63-3.65-5.485 4.162a.934.934 0 01-1.498-.784l.617-14.123L19.873 7.48a6.264 6.264 0 00-5.87 6.488l3.86 102.838a6.264 6.264 0 005.98 6.023l83.612 3.754a6.273 6.273 0 004.609-1.73 6.27 6.27 0 001.936-4.526V8.264a6.258 6.258 0 00-1.975-4.566 6.257 6.257 0 00-4.679-1.686zm-41.46 21.187c16.308 0 25.214 8.723 25.214 25.319-2.204 1.713-18.62 2.88-18.62.443.346-9.3-3.817-9.707-6.13-9.707-2.198 0-5.899.662-5.899 5.644 0 12.288 31.69 11.625 31.69 36.424 0 13.95-11.335 21.655-25.791 21.655-14.92 0-27.957-6.036-26.485-26.963.578-2.457 19.545-1.873 19.545 0-.23 8.635 1.735 11.175 6.707 11.175 3.817 0 5.553-2.103 5.553-5.646 0-12.621-31.227-13.063-31.227-36.201 0-13.285 9.138-22.143 25.444-22.143z"
                    ></path>
                  </svg>
                  <!--Vue-->
                  <svg
                    width="35"
                    height="35"
                    class="mr-1 md:mr-2"
                    version="1.1"
                    viewBox="0 0 261.76 226.69"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <g transform="matrix(1.3333 0 0 -1.3333 -76.311 313.34)">
                      <g transform="translate(178.06 235.01)">
                        <path
                          d="m0 0-22.669-39.264-22.669 39.264h-75.491l98.16-170.02 98.16 170.02z"
                          fill="#ffffff"
                        />
                      </g>
                      <g transform="translate(178.06 235.01)">
                        <path
                          d="m0 0-22.669-39.264-22.669 39.264h-36.227l58.896-102.01 58.896 102.01z"
                          fill="#cccccc"
                        />
                      </g>
                    </g>
                  </svg>
                </div>

                <div class="flex">
                  <!--Chakra-->
                  <svg
                    width="35"
                    height="35"
                    class="mr-1 md:mr-2"
                    viewBox="0 0 100 100"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      fill-rule="evenodd"
                      clip-rule="evenodd"
                      d="M50 0C77.6142 0 100 22.3858 100 50C100 77.6142 77.6142 100 50 100C22.3858 100 0 77.6142 0 50C0 22.3858 22.3858 0 50 0ZM61.1479 18.2864L27.0654 52.1343C26.5725 52.6238 26.9192 53.4646 27.6138 53.4646H50.8086C51.444 53.4646 51.8113 54.1852 51.4385 54.6996L33.2534 79.7864C32.7005 80.549 33.7257 81.4549 34.4145 80.8121L72.83 44.9592C73.3463 44.4771 73.0055 43.6121 72.2992 43.6121H50.3771C49.7864 43.6121 49.4109 42.9794 49.6942 42.4611L62.3794 19.2113C62.8094 18.4235 61.7845 17.654 61.1479 18.2864Z"
                      fill="white"
                    />
                  </svg>
                  <!--system-ui-->
                  <svg
                    width="35"
                    height="35"
                    class="mr-1 md:mr-2 fill-current"
                    version="1.1"
                    id="Layer_1"
                    xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                    viewBox="0 0 158.78 138.51"
                  >
                    <g>
                      <path
                        class="st0"
                        d="M79.37,0.11c11.33,0,22.66,0.2,33.98-0.1c4.54-0.12,7.04,1.17,9.25,5.41c5.39,10.31,11.57,20.2,17.4,30.27
		c5.99,10.36,11.88,20.78,17.95,31.1c1.08,1.83,1.11,3.07,0.03,4.93c-9.82,16.79-19.51,33.66-29.23,50.51
		c-2.41,4.18-4.89,8.32-7.1,12.6c-1.28,2.47-2.73,3.7-5.75,3.68c-24.32-0.13-48.65-0.13-72.97,0c-3,0.02-4.41-1.21-5.78-3.63
		c-7.46-13.16-15.09-26.23-22.64-39.34C9.94,87.62,5.49,79.63,0.83,71.76c-1.08-1.83-1.12-3.08-0.03-4.93
		c5.9-10.03,11.62-20.16,17.42-30.25c6.38-11.1,12.82-22.17,19.11-33.32c1.31-2.31,2.85-3.24,5.55-3.21
		C55.04,0.18,67.21,0.11,79.37,0.11z M79.39,19.3c-14.66,25.4-28.81,49.9-43.11,74.67c28.98,0,57.33,0,86.22,0
		C108.14,69.09,94.04,44.67,79.39,19.3z M74.18,8.88c-2.09-0.18-3.22-0.35-4.34-0.35C62.68,8.51,55.52,8.7,48.37,8.44
		c-3.2-0.12-4.74,1.28-6.17,3.83c-4.54,8.12-9.27,16.14-13.9,24.2C22.51,46.55,16.82,56.7,10.9,66.7c-1.23,2.07-1,3.41,0.15,5.34
		c3.99,6.71,7.75,13.55,11.65,20.32c0.43,0.75,1.17,1.34,2,2.27C41.2,66.03,57.45,37.86,74.18,8.88z M84.69,8.91
		c16.57,28.97,32.96,57.29,49.77,86.22c5.01-8.71,9.52-16.63,14.13-24.48c0.89-1.51,0.1-2.48-0.56-3.62
		c-3.64-6.34-7.25-12.69-10.89-19.02c-7.05-12.24-14.15-24.44-21.13-36.72c-1.25-2.2-2.83-2.85-5.24-2.81
		C103.62,8.6,96.46,8.5,89.31,8.53C88.04,8.54,86.78,8.73,84.69,8.91z M29.75,104.38c4.85,8.47,9.3,16.41,14.01,24.19
		c0.56,0.93,2.55,1.39,3.89,1.4c21.14,0.08,42.28,0.03,63.42,0.1c2.24,0.01,3.71-0.59,4.83-2.63c3.7-6.69,7.57-13.28,11.34-19.93
		c0.51-0.91,0.79-1.95,1.26-3.13C95.53,104.38,63.01,104.38,29.75,104.38z"
                      />
                    </g>
                  </svg>
                  <!--Svelte-->
                  <svg
                    width="35"
                    height="35"
                    class="mr-1 md:mr-2 fill-current"
                    viewBox="0 0 128 128"
                  >
                    <path
                      d="M110.293 16.914C98.586-.086 75.668-5 58.02 5.707l-29.856 18.98a33.94 33.94 0 00-15.418 22.938 35.543 35.543 0 003.566 23.102 33.01 33.01 0 00-5.066 12.793 36.517 36.517 0 006.191 27.52c11.727 16.96 34.583 21.897 52.27 11.312l29.879-19a34.025 34.025 0 0015.355-22.938 35.44 35.44 0 00-3.586-23.02c7.938-12.456 7.52-28.48-1.062-40.48zm-55.254 95.773a23.645 23.645 0 01-25.394-9.433c-3.461-4.793-4.73-10.711-3.73-16.586l.585-2.832.54-1.75 1.605 1.062c3.52 2.668 7.46 4.582 11.668 5.875l1.082.375-.122 1.067c-.105 1.48.332 3.144 1.188 4.414 1.75 2.52 4.793 3.73 7.727 2.937.644-.207 1.273-.418 1.812-.754l29.754-18.976c1.5-.961 2.457-2.398 2.832-4.106.328-1.773-.106-3.585-1.066-5.02-1.774-2.46-4.793-3.565-7.727-2.831-.645.226-1.332.48-1.879.812l-11.25 7.145c-10.644 6.328-24.394 3.355-31.46-6.832a21.854 21.854 0 01-3.75-16.586 20.643 20.643 0 019.456-13.875l29.692-18.98c1.875-1.168 3.894-2.02 6.082-2.668 9.605-2.5 19.726 1.27 25.394 9.394a22.027 22.027 0 013.043 19.398l-.543 1.77-1.539-1.062a39.399 39.399 0 00-11.727-5.875l-1.066-.313.106-1.066c.105-1.563-.332-3.207-1.188-4.48-1.754-2.52-4.793-3.583-7.727-2.833-.644.211-1.273.418-1.812.754L45.812 49.977c-1.5 1-2.46 2.394-2.773 4.144-.312 1.707.106 3.582 1.066 4.957 1.708 2.524 4.81 3.586 7.688 2.832.687-.207 1.332-.414 1.855-.75l11.375-7.254c1.856-1.226 3.938-2.12 6.067-2.707 9.668-2.52 19.75 1.274 25.394 9.438 3.461 4.793 4.793 10.707 3.832 16.52a20.487 20.487 0 01-9.332 13.874L61.23 109.97a25.82 25.82 0 01-6.187 2.707zm0 0"
                    ></path>
                  </svg>
                  <!--React-->
                  <svg
                    width="35"
                    height="35"
                    class="mr-1 md:mr-2 fill-current"
                    viewBox="0 0 128 128"
                  >
                    <g>
                      <circle cx="64" cy="64" r="11.4"></circle>
                      <path
                        d="M107.3 45.2c-2.2-.8-4.5-1.6-6.9-2.3.6-2.4 1.1-4.8 1.5-7.1 2.1-13.2-.2-22.5-6.6-26.1-1.9-1.1-4-1.6-6.4-1.6-7 0-15.9 5.2-24.9 13.9-9-8.7-17.9-13.9-24.9-13.9-2.4 0-4.5.5-6.4 1.6-6.4 3.7-8.7 13-6.6 26.1.4 2.3.9 4.7 1.5 7.1-2.4.7-4.7 1.4-6.9 2.3C8.2 50 1.4 56.6 1.4 64s6.9 14 19.3 18.8c2.2.8 4.5 1.6 6.9 2.3-.6 2.4-1.1 4.8-1.5 7.1-2.1 13.2.2 22.5 6.6 26.1 1.9 1.1 4 1.6 6.4 1.6 7.1 0 16-5.2 24.9-13.9 9 8.7 17.9 13.9 24.9 13.9 2.4 0 4.5-.5 6.4-1.6 6.4-3.7 8.7-13 6.6-26.1-.4-2.3-.9-4.7-1.5-7.1 2.4-.7 4.7-1.4 6.9-2.3 12.5-4.8 19.3-11.4 19.3-18.8s-6.8-14-19.3-18.8zM92.5 14.7c4.1 2.4 5.5 9.8 3.8 20.3-.3 2.1-.8 4.3-1.4 6.6-5.2-1.2-10.7-2-16.5-2.5-3.4-4.8-6.9-9.1-10.4-13 7.4-7.3 14.9-12.3 21-12.3 1.3 0 2.5.3 3.5.9zM81.3 74c-1.8 3.2-3.9 6.4-6.1 9.6-3.7.3-7.4.4-11.2.4-3.9 0-7.6-.1-11.2-.4-2.2-3.2-4.2-6.4-6-9.6-1.9-3.3-3.7-6.7-5.3-10 1.6-3.3 3.4-6.7 5.3-10 1.8-3.2 3.9-6.4 6.1-9.6 3.7-.3 7.4-.4 11.2-.4 3.9 0 7.6.1 11.2.4 2.2 3.2 4.2 6.4 6 9.6 1.9 3.3 3.7 6.7 5.3 10-1.7 3.3-3.4 6.6-5.3 10zm8.3-3.3c1.5 3.5 2.7 6.9 3.8 10.3-3.4.8-7 1.4-10.8 1.9 1.2-1.9 2.5-3.9 3.6-6 1.2-2.1 2.3-4.2 3.4-6.2zM64 97.8c-2.4-2.6-4.7-5.4-6.9-8.3 2.3.1 4.6.2 6.9.2 2.3 0 4.6-.1 6.9-.2-2.2 2.9-4.5 5.7-6.9 8.3zm-18.6-15c-3.8-.5-7.4-1.1-10.8-1.9 1.1-3.3 2.3-6.8 3.8-10.3 1.1 2 2.2 4.1 3.4 6.1 1.2 2.2 2.4 4.1 3.6 6.1zm-7-25.5c-1.5-3.5-2.7-6.9-3.8-10.3 3.4-.8 7-1.4 10.8-1.9-1.2 1.9-2.5 3.9-3.6 6-1.2 2.1-2.3 4.2-3.4 6.2zM64 30.2c2.4 2.6 4.7 5.4 6.9 8.3-2.3-.1-4.6-.2-6.9-.2-2.3 0-4.6.1-6.9.2 2.2-2.9 4.5-5.7 6.9-8.3zm22.2 21l-3.6-6c3.8.5 7.4 1.1 10.8 1.9-1.1 3.3-2.3 6.8-3.8 10.3-1.1-2.1-2.2-4.2-3.4-6.2zM31.7 35c-1.7-10.5-.3-17.9 3.8-20.3 1-.6 2.2-.9 3.5-.9 6 0 13.5 4.9 21 12.3-3.5 3.8-7 8.2-10.4 13-5.8.5-11.3 1.4-16.5 2.5-.6-2.3-1-4.5-1.4-6.6zM7 64c0-4.7 5.7-9.7 15.7-13.4 2-.8 4.2-1.5 6.4-2.1 1.6 5 3.6 10.3 6 15.6-2.4 5.3-4.5 10.5-6 15.5C15.3 75.6 7 69.6 7 64zm28.5 49.3c-4.1-2.4-5.5-9.8-3.8-20.3.3-2.1.8-4.3 1.4-6.6 5.2 1.2 10.7 2 16.5 2.5 3.4 4.8 6.9 9.1 10.4 13-7.4 7.3-14.9 12.3-21 12.3-1.3 0-2.5-.3-3.5-.9zM96.3 93c1.7 10.5.3 17.9-3.8 20.3-1 .6-2.2.9-3.5.9-6 0-13.5-4.9-21-12.3 3.5-3.8 7-8.2 10.4-13 5.8-.5 11.3-1.4 16.5-2.5.6 2.3 1 4.5 1.4 6.6zm9-15.6c-2 .8-4.2 1.5-6.4 2.1-1.6-5-3.6-10.3-6-15.6 2.4-5.3 4.5-10.5 6-15.5 13.8 4 22.1 10 22.1 15.6 0 4.7-5.8 9.7-15.7 13.4z"
                      ></path>
                    </g>
                  </svg>
                  <!--Fast-->
                  <svg
                    width="35"
                    height="35"
                    class="mr-1 md:mr-2"
                    viewBox="0 0 143 100"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      fill-rule="evenodd"
                      clip-rule="evenodd"
                      d="M126.942 55.4897L121.876 54.8434C120.976 54.7285 120.156 55.3657 120.006 56.259C118.858 63.0568 116.012 69.4554 111.731 74.8627C107.451 80.2699 101.874 84.5111 95.5169 87.1935C89.1601 89.876 82.2286 90.9131 75.364 90.2088C68.4993 89.5046 61.9235 87.0817 56.2451 83.1645C53.7405 81.4369 54.648 77.7925 57.5879 77.006L79.0116 71.2712C79.4408 71.1576 79.8433 70.9605 80.1961 70.6912C80.5489 70.4219 80.8451 70.0857 81.0676 69.7019C81.2902 69.318 81.4347 68.8941 81.493 68.4544C81.5513 68.0147 81.5221 67.5678 81.4073 67.1393C81.2924 66.7109 81.094 66.3093 80.8235 65.9575C80.553 65.6058 80.2157 65.3108 79.8309 65.0895C79.4461 64.8682 79.0214 64.7249 78.5811 64.6679C78.1408 64.6108 77.6935 64.6411 77.265 64.757L49.6989 72.136C49.6277 72.1553 49.5565 72.1726 49.4843 72.1889L36.4846 75.6686C36.4569 75.6791 36.4287 75.6882 36.4001 75.696C35.971 75.8096 35.5684 76.0067 35.2156 76.276C34.8628 76.5453 34.5667 76.8815 34.3441 77.2654C34.1216 77.6492 33.977 78.0731 33.9187 78.5128C33.8605 78.9525 33.8896 79.3994 34.0045 79.8279C34.1194 80.2563 34.3177 80.6579 34.5882 81.0097C34.8587 81.3614 35.196 81.6564 35.5808 81.8777C35.9656 82.099 36.3903 82.2423 36.8306 82.2994C37.271 82.3564 37.7182 82.3261 38.1468 82.2102L38.4418 82.131C40.4662 81.5893 42.6024 82.2844 44.0602 83.7875C49.1215 89.0075 55.274 93.0468 62.0783 95.6173C68.8827 98.1877 76.1712 99.2258 83.4235 98.6574C94.4634 97.7913 104.892 93.2457 113.037 85.7501C121.181 78.2544 126.569 68.243 128.337 57.322C128.482 56.4277 127.843 55.6045 126.942 55.4897ZM23.8846 51.1442C23.7021 51.174 23.5211 51.213 23.3424 51.261L12.7394 54.0995C11.8747 54.331 10.9534 54.2099 10.1781 53.7628C9.40274 53.3156 8.83697 52.5791 8.60522 51.7153C8.37346 50.8515 8.4947 49.931 8.94226 49.1565C9.38982 48.382 10.127 47.8168 10.9917 47.5852L27.2243 43.2397C29.3077 42.6828 30.8326 40.9328 31.2965 38.8291C32.8339 31.8514 35.8694 25.2902 40.1932 19.599C44.517 13.9077 50.026 9.22208 56.3397 5.86571C66.1154 0.668376 77.3553 -1.09802 88.2562 0.849887C99.1571 2.7978 109.087 8.34711 116.453 16.6076C117.058 17.2844 116.961 18.321 116.263 18.9013L111.081 23.2133C111.078 23.2153 111.075 23.2153 111.072 23.2133C106.566 17.8098 100.745 13.6556 94.1669 11.1503C87.5892 8.6451 80.4767 7.87318 73.5139 8.90882C66.551 9.94447 59.9722 12.7528 54.4102 17.0637C48.8483 21.3746 44.4905 27.0429 41.7561 33.5232C40.576 36.322 43.2301 38.9551 46.167 38.1696L48.4273 37.5639C49.292 37.3324 50.2134 37.4535 50.9887 37.9006C51.764 38.3477 52.3298 39.0842 52.5615 39.948C52.7933 40.8119 52.672 41.7323 52.2245 42.5068C51.7769 43.2814 51.0397 43.8466 50.175 44.0781L42.3756 46.1655C42.1982 46.2132 42.0233 46.2699 41.8517 46.3352L23.8846 51.1442Z"
                      fill="white"
                    />
                    <path
                      d="M69.5984 55.2172C71.399 54.7352 72.4676 52.8863 71.9851 51.0874C71.5026 49.2886 69.6518 48.2211 67.8512 48.7031L58.2039 51.2855C56.4033 51.7675 55.3348 53.6165 55.8172 55.4153C56.2997 57.2141 58.1505 58.2816 59.9511 57.7996L69.5984 55.2172Z"
                      fill="white"
                    />
                    <path
                      d="M47.6546 61.1093C49.4552 60.6273 50.5238 58.7783 50.0413 56.9795C49.5589 55.1807 47.7081 54.1132 45.9074 54.5952L3.52556 65.9401C1.72495 66.4221 0.656386 68.2711 1.13886 70.0699C1.62133 71.8687 3.47214 72.9362 5.27275 72.4542L47.6546 61.1093Z"
                      fill="white"
                    />
                    <path
                      d="M94.4808 48.7741C96.2814 48.2921 97.35 46.4431 96.8675 44.6443C96.385 42.8455 94.5342 41.778 92.7336 42.26L79.77 45.7301C77.9694 46.2121 76.9009 48.0611 77.3833 49.8599C77.8658 51.6587 79.7166 52.7262 81.5172 52.2442L94.4808 48.7741Z"
                      fill="white"
                    />
                    <path
                      fill-rule="evenodd"
                      clip-rule="evenodd"
                      d="M99.4129 42.7713C102.487 54.2306 114.277 61.0304 125.748 57.9603C137.218 54.8892 144.025 43.1107 140.952 31.6524C137.878 20.193 126.088 13.3922 114.617 16.4634C103.147 19.5335 96.3397 31.3119 99.4129 42.7713ZM120.191 52.3729C128.765 52.3729 135.716 45.5802 135.716 37.2001C135.716 28.8201 128.765 22.0274 120.191 22.0274C111.616 22.0274 104.665 28.8201 104.665 37.2001C104.665 45.5802 111.616 52.3729 120.191 52.3729Z"
                      fill="white"
                    />
                  </svg>

                  <p class="text-white self-center text-lg md:text-xl">20+</p>
                </div>
              </div>
            </div>
          </component>
          <component
            v-for="({ left, bg }, index) in [
              { left: 10, bg: '#333333' },
              { left: 20, bg: '#616161' },
              { left: 30, bg: '#A2A2A2' },
            ]"
            :style="`position: absolute; top: 0; z-index: ${
              3 - index
            }; left:${left}px; background-color:${bg}`"
            url="/starterkits"
            :reducedHover="true"
            :is="Card"
            :key="bg"
          >
            <div
              class="w-full h-full flex items-center text-3xl sm:text-4xl text-bold text-center"
            ></div>
          </component>
        </div>
      </div>
      <svg
        id="highlight-right-paddle"
        tabindex="0"
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        viewBox="0 0 16 16"
        fill="currentColor"
      >
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M10.072 8.024L5.715 3.667l.618-.62L11 7.716v.618L6.333 13l-.618-.619 4.357-4.357z"
        />
      </svg>
    </div>
  </section>
</template>

<style>
#highlight-wrapper {
  position: relative;
  max-width: 100%;
  height: max-content;
  margin: -600px auto 0;
  overflow: hidden;
}

#highlight-container {
  display: flex;
  padding: 3rem 2rem;
  overflow-x: scroll;
  scrollbar-width: none;
}

#highlight-container > * + * {
  margin-left: 4rem;
}

#highlight-container::-webkit-scrollbar {
  display: none;
}

#highlight-container a {
  flex-shrink: 0;
}

#highlight-left-paddle,
#highlight-right-paddle {
  position: absolute;
  width: 40px;
  height: 40px;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 100%;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
  z-index: 5;
}

#highlight-left-paddle:focus,
#highlight-right-paddle:focus {
  border: 1px solid white;
  outline: none;
}

#highlight-left-paddle:hover,
#highlight-right-paddle:hover,
#highlight-left-paddle:focus,
#highlight-right-paddle:focus {
  transform: translateY(calc(-50% - 4px));
}

#highlight-left-paddle {
  left: 10px;
}

#highlight-right-paddle {
  right: 10px;
}
</style>

<script>
import StarterCard from '../../starter-card/src/StarterCard.vue';
import Card from '../../card/src/Card.vue';
import kits from './data';
import { setupScrollArrows, teardownScrollArrows } from './scroll-arrows.js';
import { setupDragHandling, teardownDragHandling } from './drag-handling.js';

export default {
  computed: {
    kits() {
      return kits;
    },
  },
  data() {
    return { Card, StarterCard };
  },
  mounted: function () {
    this.$nextTick(function () {
      setupScrollArrows(
        'highlight-left-paddle',
        'highlight-right-paddle',
        'highlight-container'
      );
      setupDragHandling('highlight-container');
    });
  },
  beforeUnmount: function () {
    teardownScrollArrows();
    teardownDragHandling();
  },
};
</script>
