<script>
  let { isRotated } = $props();
</script>

<div class={isRotated ? "rotate-x-40 rotate-z-35" : ""}>
  <div class=".max-w-90 .min-w-90">
    <div class="flex flex-col items-center">
      <div class="mockup-phone border-primary">
        <div class="mockup-phone-camera"></div>
        <div class="mockup-phone-display text-white .grid .place-content-center bg-base-200">
          <div class="flex flex-col h-full w-full">
            <div class="p-4 text-xs my-8">
              <pre>$ dig example.hexname.com -t TXT +short</pre>
              <pre class="text-success">"v=spf1 mx ra=spf-reports -all"</pre>
              <pre>$</pre>
              <pre>$</pre>
              <pre>$ dig example.hexname.com +short</pre>
              <pre class="text-success">198.51.100.98</pre>
              <pre>$ curl icanhazip.com</pre>
              <pre class="text-success">198.51.100.135</pre>
              <pre>$ ./update-ddns.sh</pre>
              <pre>$ dig example.hexname.com +short</pre>
              <pre class="text-success">198.51.100.135</pre>
              <pre>$ <text class="animate-terminal-blink">█</text></pre>
            </div>
  
            <div class="mt-auto bg-base-300 w-full p-1 text-xs">
              <div class="my-1 grid grid-cols-7 w-full justify-items-center items-center gap-1">
                <kbd>ESC</kbd>
                <kbd>/</kbd>
                <kbd>-</kbd>
                <kbd>HOME</kbd>
                <kbd class="scale-130">↑</kbd>
                <kbd>END</kbd>
                <kbd>PGUP</kbd>
                <kbd>
                  <svg class="size-3.5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M22 4.25a.75.75 0 00-1.5 0v15a.75.75 0 001.5 0v-15zm-9.72 14.28a.75.75 0 11-1.06-1.06l4.97-4.97H1.75a.75.75 0 010-1.5h14.44l-4.97-4.97a.75.75 0 011.06-1.06l6.25 6.25a.75.75 0 010 1.06l-6.25 6.25z"/></svg>
                </kbd>
                <kbd>CTRL</kbd>
                <kbd>ALT</kbd>
                <kbd class="scale-130">←</kbd>
                <kbd class="scale-130">↓</kbd>
                <kbd class="scale-130">→</kbd>
                <kbd>PGDN</kbd>
              </div>
            </div>
            <div class="bg-base-100 mb-5 py-2 w-full">
              <div class="flex w-full justify-center gap-1">
                <kbd class="kbd h-7 cursor-pointer hover:-translate-y-[2px] hover:bg-white/10 hover:tooltip hover:tooltip-primary" data-tip="q">q</kbd>
                <kbd class="kbd h-7 cursor-pointer hover:-translate-y-[2px] hover:bg-white/10 hover:tooltip hover:tooltip-primary" data-tip="w">w</kbd>
                <kbd class="kbd h-7 cursor-pointer hover:-translate-y-[2px] hover:bg-white/10 hover:tooltip hover:tooltip-primary" data-tip="e">e</kbd>
                <kbd class="kbd h-7 cursor-pointer hover:-translate-y-[2px] hover:bg-white/10 hover:tooltip hover:tooltip-primary" data-tip="r">r</kbd>
                <kbd class="kbd h-7 cursor-pointer hover:-translate-y-[2px] hover:bg-white/10 hover:tooltip hover:tooltip-primary" data-tip="t">t</kbd>
                <kbd class="kbd h-7 cursor-pointer hover:-translate-y-[2px] hover:bg-white/10 hover:tooltip hover:tooltip-primary" data-tip="y">y</kbd>
                <kbd class="kbd h-7 cursor-pointer hover:-translate-y-[2px] hover:bg-white/10 hover:tooltip hover:tooltip-primary" data-tip="u">u</kbd>
                <kbd class="kbd h-7 cursor-pointer hover:-translate-y-[2px] hover:bg-white/10 hover:tooltip hover:tooltip-primary" data-tip="i">i</kbd>
                <kbd class="kbd h-7 cursor-pointer hover:-translate-y-[2px] hover:bg-white/10 hover:tooltip hover:tooltip-primary" data-tip="o">o</kbd>
                <kbd class="kbd h-7 cursor-pointer hover:-translate-y-[2px] hover:bg-white/10 hover:tooltip hover:tooltip-primary" data-tip="p">p</kbd>
              </div>
              <div class="my-1 flex w-full justify-center gap-1">
                <kbd class="kbd h-7 cursor-pointer hover:-translate-y-[2px] hover:bg-white/10 hover:tooltip hover:tooltip-primary" data-tip="a">a</kbd>
                <kbd class="kbd h-7 cursor-pointer hover:-translate-y-[2px] hover:bg-white/10 hover:tooltip hover:tooltip-primary" data-tip="s">s</kbd>
                <kbd class="kbd h-7 cursor-pointer hover:-translate-y-[2px] hover:bg-white/10 hover:tooltip hover:tooltip-primary" data-tip="d">d</kbd>
                <kbd class="kbd h-7 cursor-pointer hover:-translate-y-[2px] hover:bg-white/10 hover:tooltip hover:tooltip-primary" data-tip="f">f</kbd>
                <kbd class="kbd h-7 cursor-pointer hover:-translate-y-[2px] hover:bg-white/10 hover:tooltip hover:tooltip-primary" data-tip="g">g</kbd>
                <kbd class="kbd h-7 cursor-pointer hover:-translate-y-[2px] hover:bg-white/10 hover:tooltip hover:tooltip-primary" data-tip="h">h</kbd>
                <kbd class="kbd h-7 cursor-pointer hover:-translate-y-[2px] hover:bg-white/10 hover:tooltip hover:tooltip-primary" data-tip="j">j</kbd>
                <kbd class="kbd h-7 cursor-pointer hover:-translate-y-[2px] hover:bg-white/10 hover:tooltip hover:tooltip-primary" data-tip="k">k</kbd>
                <kbd class="kbd h-7 cursor-pointer hover:-translate-y-[2px] hover:bg-white/10 hover:tooltip hover:tooltip-primary" data-tip="l">l</kbd>
              </div>
              <div class="my-1 flex w-full justify-center gap-1">
                <kbd class="kbd h-7 cursor-pointer hover:-translate-y-[2px] hover:bg-white/10">
                  <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none"><path d="M8 17V12H5.6302C4.71068 12 4.27858 10.8635 4.96584 10.2526L10.6713 5.18109C11.429 4.50752 12.571 4.50752 13.3287 5.18109L19.0342 10.2526C19.7214 10.8635 19.2893 12 18.3698 12H16V17C16 18.1046 15.1046 19 14 19H10C8.89543 19 8 18.1046 8 17Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                </kbd>
                <kbd class="kbd h-7 cursor-pointer hover:-translate-y-[2px] hover:bg-white/10 hover:tooltip hover:tooltip-primary" data-tip="z">z</kbd>
                <kbd class="kbd h-7 cursor-pointer hover:-translate-y-[2px] hover:bg-white/10 hover:tooltip hover:tooltip-primary" data-tip="x">x</kbd>
                <kbd class="kbd h-7 cursor-pointer hover:-translate-y-[2px] hover:bg-white/10 hover:tooltip hover:tooltip-primary" data-tip="c">c</kbd>
                <kbd class="kbd h-7 cursor-pointer hover:-translate-y-[2px] hover:bg-white/10 hover:tooltip hover:tooltip-primary" data-tip="v">v</kbd>
                <kbd class="kbd h-7 cursor-pointer hover:-translate-y-[2px] hover:bg-white/10 hover:tooltip hover:tooltip-primary" data-tip="b">b</kbd>
                <kbd class="kbd h-7 cursor-pointer hover:-translate-y-[2px] hover:bg-white/10 hover:tooltip hover:tooltip-primary" data-tip="n">n</kbd>
                <kbd class="kbd h-7 cursor-pointer hover:-translate-y-[2px] hover:bg-white/10 hover:tooltip hover:tooltip-primary" data-tip="m">m</kbd>
                <kbd class="kbd h-7 cursor-pointer hover:-translate-y-[2px] hover:bg-white/10 hover:tooltip hover:tooltip-primary" data-tip="/">/</kbd>
                <kbd class="kbd h-7 cursor-pointer hover:-translate-y-[2px] hover:bg-white/10">
                  <svg class="w-4.5 h-4.5" viewBox="0 0 24 24" fill="none"><path d="M7.91987 5C7.33602 5 6.78132 5.25513 6.40136 5.69842L2.11564 10.6984C1.47366 11.4474 1.47366 12.5526 2.11564 13.3016L6.40136 18.3016C6.78132 18.7449 7.33602 19 7.91987 19L19 19C20.1046 19 21 18.1046 21 17L21 7C21 5.89543 20.1046 5 19 5L7.91987 5Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/><path d="M15 10.0001L11 14.0001" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/><path d="M11 10.0001L15 14.0001" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></svg>
                </kbd>
              </div>
              <div class="my-1 flex w-full justify-center gap-1">
                <kbd class="kbd h-7 cursor-pointer hover:-translate-y-[2px] hover:bg-white/10">123</kbd>
                <kbd class="kbd h-7 cursor-pointer hover:-translate-y-[2px] hover:bg-white/10 hover:tooltip hover:tooltip-primary" data-tip=",">,</kbd>
                <kbd class="kbd h-7 cursor-pointer hover:-translate-y-[2px] hover:bg-white/10 w-39.5 text-xs text-primary-content/60">&lt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Space&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &gt;</kbd>
                <kbd class="kbd h-7 cursor-pointer hover:-translate-y-[2px] hover:bg-white/10 hover:tooltip hover:tooltip-primary" data-tip=".">.</kbd>
                <kbd class="kbd h-7 cursor-pointer hover:-translate-y-[2px] hover:bg-white/10">
                  <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M20.239 3.749a.75.75 0 0 0-.75.75V15H5.549l2.47-2.47a.75.75 0 0 0-1.06-1.06l-3.75 3.75a.75.75 0 0 0 0 1.06l3.75 3.75a.75.75 0 1 0 1.06-1.06L5.55 16.5h14.69a.75.75 0 0 0 .75-.75V4.5a.75.75 0 0 0-.75-.751Z" clip-rule="evenodd"/></svg>
                </kbd>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="flex flex-col items-center">
    {#if isRotated}
      <div style="box-shadow: 0 0 200px rgba(18, 68, 227, 0.8)" class="absolute mockup-phone shadow-2xl shadow-primary/50 border-black/40 border-[3.5px] bg-white/55 -z-1 -translate-y-178 translate-x-5 scale-93 max-w-90 min-w-90"></div>
      <div style="border-bottom: 1.5px solid" class="absolute rounded-lg -translate-y-128 translate-x-44 rotate-90 z-9 w-25 h-[10px] bg-black/65"></div>
      <div style="border-bottom: 1.5px solid" class="absolute rounded-lg -translate-y-100 translate-x-44 rotate-90 z-9 w-15 h-[10px] bg-black/65"></div>
      <div style="border-left: 1.5px solid; border-bottom: 1.5px solid;" class="absolute rounded-lg ml-3 mt-[3px] w-10 h-3 border-2 border-white/15 bg-black/80"></div>
    {:else}
      <div style="box-shadow: 0 0 200px rgba(18, 68, 227, 0.8)" class="absolute mockup-phone -z-1 -translate-y-177 scale-93 w-80"></div>
    {/if}
  </div>
</div>