---
import BaseLayout from '../layouts/BaseLayout.astro';
---

<BaseLayout
  title="You're Offline — Reconnect to Keep Browsing"
  description="You appear to be offline. Check your internet connection and try again — many WorkRoot IT Solutions pages stay available once you have visited them before."
  noIndex={true}
>
  <section class="min-h-[60vh] flex items-center justify-center px-4">
    <div class="text-center max-w-lg mx-auto">
      <!-- Icon -->
      <div class="mb-8 flex justify-center">
        <div class="w-24 h-24 rounded-full bg-primary/10 flex items-center justify-center">
          <svg
            class="w-12 h-12 text-primary"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
            aria-hidden="true"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="1.5"
              d="M18.364 5.636a9 9 0 010 12.728M15.536 8.464a5 5 0 010 7.072M12 12h.01M6.343 17.657a9 9 0 010-12.728M8.464 15.536a5 5 0 010-7.072"
            />
            <line x1="3" y1="3" x2="21" y2="21" stroke-width="1.5" stroke-linecap="round" />
          </svg>
        </div>
      </div>

      <!-- Heading -->
      <h1 class="text-3xl font-bold text-secondary-900 mb-4">You're Offline</h1>

      <!-- Message -->
      <p class="text-secondary-600 text-lg mb-8">
        It looks like you've lost your internet connection. Some content may still be available
        from your last visit.
      </p>

      <!-- Actions -->
      <div class="flex flex-col sm:flex-row gap-4 justify-center">
        <button
          id="retry-btn"
          class="btn-primary px-8 py-3 rounded-lg font-semibold transition-all"
          onclick="window.location.reload()"
        >
          Try Again
        </button>
        <a
          href="/"
          class="btn-secondary px-8 py-3 rounded-lg font-semibold transition-all text-center"
        >
          Go to Home
        </a>
      </div>

      <!-- Cached pages hint -->
      <p class="mt-8 text-sm text-secondary-400">
        Previously visited pages may still be accessible from your browser cache.
      </p>
    </div>
  </section>
</BaseLayout>

<style>
  .btn-primary {
    background-color: theme('colors.primary.DEFAULT');
    color: white;
  }
  .btn-primary:hover {
    background-color: theme('colors.primary.600');
  }
  .btn-secondary {
    border: 2px solid theme('colors.primary.DEFAULT');
    color: theme('colors.primary.DEFAULT');
  }
  .btn-secondary:hover {
    background-color: theme('colors.primary.50');
  }
</style>