---
import BaseLayout from '@/layouts/BaseLayout.astro';
---
<BaseLayout
  title="404 — Ups, el server se fue a buscar yerba"
  description="La página que buscás no existe, pero tenemos un robot tomando mate para hacerte compañía."
>
  <section class="relative overflow-hidden py-16 md:py-20" style="background: var(--hds-bg-soft);">
    <div class="absolute inset-0 particle-grid opacity-40" aria-hidden="true"></div>

    <div class="relative max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 w-full text-center">

      <div class="inline-block">
        <span class="inline-flex items-center gap-3 text-xs font-semibold tracking-[0.25em] uppercase" style="color: var(--color-hds-naranja);">
          <span class="inline-block w-10 h-px" style="background: var(--color-hds-naranja);"></span>
          Error 404
          <span class="inline-block w-10 h-px" style="background: var(--color-hds-naranja);"></span>
        </span>
      </div>

      <h1 class="font-display leading-tight mt-5 mb-8" style="font-size: clamp(2.25rem, 5vw, 3.75rem); color: var(--hds-fg);">
        Por acá no hay <span style="color: var(--color-hds-naranja); font-style: italic;">nada que ver</span>.
      </h1>

      <div class="mb-8" aria-hidden="true">
        <picture>
          <source type="image/avif" srcset="/images/404/robo-mate.avif" />
          <source type="image/webp" srcset="/images/404/robo-mate.webp" />
          <img
            src="/images/404/robo-mate.png"
            alt="Robot tomando mate con cara de vago"
            width="800"
            height="436"
            class="w-full max-w-lg mx-auto h-auto"
            loading="eager"
            decoding="async"
            onerror="this.style.display='none'; document.getElementById('robot-fallback').style.display='block';"
          />
        </picture>

        <div id="robot-fallback" style="display:none;" aria-hidden="true">
          <svg viewBox="0 0 480 480" xmlns="http://www.w3.org/2000/svg" class="w-full max-w-lg mx-auto">
            <defs>
              <linearGradient id="bg-grad" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="#FAF6EE" stop-opacity="0"/>
                <stop offset="100%" stop-color="#EE7623" stop-opacity="0.08"/>
              </linearGradient>
              <filter id="soft-shadow" x="-50%" y="-50%" width="200%" height="200%">
                <feGaussianBlur in="SourceAlpha" stdDeviation="8"/>
                <feOffset dx="0" dy="4" result="offsetblur"/>
                <feComponentTransfer><feFuncA type="linear" slope="0.15"/></feComponentTransfer>
                <feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge>
              </filter>
            </defs>

            <circle cx="240" cy="240" r="220" fill="url(#bg-grad)"/>

            <g opacity="0.35">
              <rect x="60" y="80" width="8" height="8" fill="#FA9F5C" rx="1"/>
              <rect x="68" y="80" width="8" height="8" fill="#FA9F5C" rx="1"/>
              <rect x="76" y="80" width="8" height="8" fill="#FA9F5C" rx="1"/>
              <rect x="404" y="80" width="8" height="8" fill="#FA9F5C" rx="1"/>
              <rect x="412" y="80" width="8" height="8" fill="#FA9F5C" rx="1"/>
              <rect x="68" y="88" width="8" height="8" fill="#FFCBA1" rx="1"/>
              <rect x="412" y="88" width="8" height="8" fill="#FFCBA1" rx="1"/>
              <rect x="60" y="380" width="8" height="8" fill="#FA9F5C" rx="1"/>
              <rect x="68" y="380" width="8" height="8" fill="#FA9F5C" rx="1"/>
              <rect x="404" y="380" width="8" height="8" fill="#FA9F5C" rx="1"/>
              <rect x="412" y="380" width="8" height="8" fill="#FA9F5C" rx="1"/>
              <rect x="68" y="388" width="8" height="8" fill="#FFCBA1" rx="1"/>
              <rect x="412" y="388" width="8" height="8" fill="#FFCBA1" rx="1"/>
            </g>

            <ellipse cx="240" cy="420" rx="100" ry="10" fill="#EE7623" opacity="0.12"/>

            <g filter="url(#soft-shadow)">
              <rect x="160" y="240" width="160" height="140" rx="20" fill="#E8E2D5" stroke="#EE7623" stroke-width="3"/>
              <circle cx="200" cy="280" r="6" fill="#EE7623">
                <animate attributeName="opacity" values="1;0.3;1" dur="1.8s" repeatCount="indefinite"/>
              </circle>
              <circle cx="200" cy="280" r="6" fill="#EE7623" opacity="0.3"/>
              <rect x="220" y="276" width="80" height="8" rx="2" fill="#1A1612" opacity="0.15"/>
              <rect x="220" y="290" width="60" height="6" rx="2" fill="#1A1612" opacity="0.1"/>
              <circle cx="280" cy="340" r="14" fill="#FAF6EE" stroke="#EE7623" stroke-width="2"/>
              <circle cx="280" cy="340" r="6" fill="#EE7623"/>
            </g>

            <g filter="url(#soft-shadow)">
              <rect x="170" y="100" width="140" height="140" rx="24" fill="#F5EFE3" stroke="#EE7623" stroke-width="3"/>
            </g>

            <line x1="240" y1="100" x2="240" y2="68" stroke="#EE7623" stroke-width="4" stroke-linecap="round"/>
            <circle cx="240" cy="60" r="8" fill="#EE7623">
              <animate attributeName="r" values="6;9;6" dur="2s" repeatCount="indefinite"/>
            </circle>

            <g>
              <path d="M 200 165 Q 210 172 220 165" stroke="#1A1612" stroke-width="4" fill="none" stroke-linecap="round"/>
              <line x1="195" y1="158" x2="225" y2="155" stroke="#1A1612" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
              <path d="M 195 158 Q 210 168 225 158" stroke="#1A1612" stroke-width="3" fill="none" stroke-linecap="round"/>

              <ellipse cx="260" cy="167" rx="10" ry="12" fill="#FAF6EE" stroke="#1A1612" stroke-width="2"/>
              <circle cx="263" cy="170" r="5" fill="#1A1612"/>
              <circle cx="264" cy="167" r="2" fill="#FAF6EE"/>
            </g>

            <ellipse cx="190" cy="195" rx="8" ry="4" fill="#FA9F5C" opacity="0.6"/>
            <ellipse cx="290" cy="195" rx="8" ry="4" fill="#FA9F5C" opacity="0.6"/>

            <ellipse cx="240" cy="210" rx="14" ry="10" fill="#1A1612"/>
            <ellipse cx="240" cy="212" rx="10" ry="6" fill="#FAF6EE"/>
            <line x1="240" y1="205" x2="240" y2="218" stroke="#1A1612" stroke-width="1.5" opacity="0.3"/>

            <g filter="url(#soft-shadow)">
              <rect x="120" y="180" width="24" height="80" rx="12" fill="#F5EFE3" stroke="#EE7623" stroke-width="3" transform="rotate(-25 132 220)"/>
              <circle cx="110" cy="170" r="18" fill="#F5EFE3" stroke="#EE7623" stroke-width="3"/>
              <line x1="92" y1="160" x2="86" y2="152" stroke="#EE7623" stroke-width="3" stroke-linecap="round"/>
              <line x1="98" y1="155" x2="94" y2="145" stroke="#EE7623" stroke-width="3" stroke-linecap="round"/>
              <line x1="106" y1="153" x2="104" y2="142" stroke="#EE7623" stroke-width="3" stroke-linecap="round"/>
              <line x1="114" y1="156" x2="115" y2="146" stroke="#EE7623" stroke-width="3" stroke-linecap="round"/>
              <line x1="120" y1="162" x2="124" y2="155" stroke="#EE7623" stroke-width="3" stroke-linecap="round"/>
            </g>

            <g filter="url(#soft-shadow)">
              <rect x="336" y="220" width="24" height="80" rx="12" fill="#F5EFE3" stroke="#EE7623" stroke-width="3" transform="rotate(30 348 260)"/>
              <circle cx="358" cy="290" r="16" fill="#F5EFE3" stroke="#EE7623" stroke-width="3"/>
            </g>

            <g transform="translate(330 280)">
              <ellipse cx="22" cy="28" rx="24" ry="20" fill="#1A1612"/>
              <ellipse cx="14" cy="22" rx="6" ry="4" fill="#FAF6EE" opacity="0.2"/>
              <ellipse cx="22" cy="14" rx="20" ry="5" fill="#EE7623"/>
              <ellipse cx="22" cy="13" rx="18" ry="3" fill="#FFCBA1"/>
              <rect x="35" y="6" width="8" height="14" rx="2" fill="#8A8580"/>
              <rect x="36" y="2" width="6" height="6" rx="1" fill="#C8C2B8"/>
              <ellipse cx="22" cy="11" rx="14" ry="2" fill="#2E7D5B" opacity="0.8"/>
            </g>

            <g opacity="0.4">
              <path d="M 380 270 Q 384 262 380 254" stroke="#8A8580" stroke-width="2" fill="none" stroke-linecap="round">
                <animate attributeName="opacity" values="0;0.6;0" dur="2.5s" repeatCount="indefinite"/>
              </path>
              <path d="M 392 270 Q 396 262 392 254" stroke="#8A8580" stroke-width="2" fill="none" stroke-linecap="round">
                <animate attributeName="opacity" values="0;0.6;0" dur="2.5s" begin="0.5s" repeatCount="indefinite"/>
              </path>
              <path d="M 386 274 Q 390 266 386 258" stroke="#8A8580" stroke-width="2" fill="none" stroke-linecap="round">
                <animate attributeName="opacity" values="0;0.6;0" dur="2.5s" begin="1s" repeatCount="indefinite"/>
              </path>
            </g>

            <g filter="url(#soft-shadow)">
              <rect x="195" y="380" width="30" height="50" rx="10" fill="#F5EFE3" stroke="#EE7623" stroke-width="3"/>
              <rect x="255" y="380" width="30" height="50" rx="10" fill="#F5EFE3" stroke="#EE7623" stroke-width="3"/>
              <ellipse cx="210" cy="432" rx="22" ry="8" fill="#EE7623"/>
              <ellipse cx="270" cy="432" rx="22" ry="8" fill="#EE7623"/>
            </g>
          </svg>
        </div>
      </div>

      <p class="text-lg mb-8 max-w-md mx-auto" style="color: var(--hds-fg-soft);">
        La página que buscás no existe, fue movida o la URL está mal escrita. Mientras nuestro robot vuelve a su puesto, te convidamos un mate virtual.
      </p>

      <div class="flex justify-center mb-12">
        <a href="/" class="btn-primary text-sm">
          Volver al inicio
        </a>
      </div>

      <!--#if expr="$REMOTE_ADDR" -->
      <div class="mt-4 pt-6 border-t text-left" style="border-color: var(--hds-line);">
        <p class="text-xs font-semibold tracking-[0.2em] uppercase mb-3 text-center" style="color: var(--color-hds-naranja);">
          Detalles técnicos
        </p>
        <dl class="text-xs space-y-1.5" style="color: var(--hds-fg-muted); font-family: ui-monospace, monospace;">
          <div class="flex gap-2">
            <dt class="w-32 flex-shrink-0" style="color: var(--hds-fg-soft);">URL solicitada:</dt>
            <dd class="break-all"><!--#echo var="REQUEST_URI" --></dd>
          </div>
          <div class="flex gap-2">
            <dt class="w-32 flex-shrink-0" style="color: var(--hds-fg-soft);">URL de referencia:</dt>
            <dd class="break-all"><!--#echo var="HTTP_REFERER" --></dd>
          </div>
          <div class="flex gap-2">
            <dt class="w-32 flex-shrink-0" style="color: var(--hds-fg-soft);">IP del visitante:</dt>
            <dd><!--#echo var="REMOTE_ADDR" --></dd>
          </div>
          <div class="flex gap-2">
            <dt class="w-32 flex-shrink-0" style="color: var(--hds-fg-soft);">Navegador:</dt>
            <dd class="break-all"><!--#echo var="HTTP_USER_AGENT" --></dd>
          </div>
          <div class="flex gap-2">
            <dt class="w-32 flex-shrink-0" style="color: var(--hds-fg-soft);">Servidor:</dt>
            <dd><!--#echo var="SERVER_NAME" --></dd>
          </div>
        </dl>
      </div>
      <!--#endif -->
    </div>
  </section>
</BaseLayout>
