<script lang="ts">
  let { error, status } = $props();

  const title = $derived(status === 404 ? 'Page Not Found' : 'Something Went Wrong');
  const detail = $derived(
    status === 404
      ? 'That route does not exist in the Hunter Premium Produce workspace. Check the address or return to login.'
      : error instanceof Error
        ? error.message
        : 'The workspace hit an unexpected error while loading this page.'
  );
</script>

<svelte:head>
  <title>{title} | Hunter Premium Produce</title>
</svelte:head>

<section class="error-stage">
  <div class="error-card">
    <div class="error-backdrop" aria-hidden="true">
      <span class="glow glow-one"></span>
      <span class="glow glow-two"></span>
      <span class="grid-band"></span>
    </div>

    <div class="error-header">
      <div class="brand-lockup">
        <img class="brand-logo" src="/logo-hsf.png" alt="Hunter Premium Produce" />
        <div>
          <p class="eyebrow">Workspace Error</p>
          <strong>Hunter Premium Produce</strong>
        </div>
      </div>
      <span class="status-pill">{status}</span>
    </div>

    <div class="error-copy">
      <p class="eyebrow">Route Response</p>
      <h1>{title}</h1>
      <p>{detail}</p>
    </div>

    <div class="error-actions">
      <a class="primary-link" href="/">Return to Workspace</a>
      <a class="secondary-link" href="/mix-calculator">Open Mix Calculator</a>
    </div>
  </div>
</section>

<style>
  .error-stage {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem;
    background:
      radial-gradient(circle at top left, rgba(214, 234, 221, 0.86), transparent 36%),
      linear-gradient(180deg, #f4f7f2 0%, #eef4ee 100%);
    color: #1d3528;
  }

  .error-card {
    position: relative;
    overflow: hidden;
    width: min(100%, 58rem);
    padding: 2rem;
    border: 1px solid rgba(32, 52, 41, 0.08);
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 24px 60px rgba(39, 63, 52, 0.12);
  }

  .error-backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .glow {
    position: absolute;
    border-radius: 999px;
    filter: blur(16px);
    opacity: 0.8;
  }

  .glow-one {
    top: -3rem;
    right: -2rem;
    width: 15rem;
    height: 15rem;
    background: rgba(160, 199, 124, 0.25);
  }

  .glow-two {
    bottom: -4rem;
    left: -3rem;
    width: 18rem;
    height: 18rem;
    background: rgba(214, 166, 90, 0.16);
  }

  .grid-band {
    position: absolute;
    inset: auto 0 0;
    height: 8rem;
    background:
      linear-gradient(rgba(33, 54, 42, 0.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(33, 54, 42, 0.07) 1px, transparent 1px);
    background-size: 2rem 2rem;
    mask-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.7));
  }

  .error-header,
  .error-copy,
  .error-actions {
    position: relative;
    z-index: 1;
  }

  .error-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
  }

  .brand-lockup {
    display: flex;
    align-items: center;
    gap: 0.9rem;
  }

  .brand-logo {
    width: 3rem;
    height: 3rem;
    object-fit: contain;
  }

  .eyebrow {
    margin: 0 0 0.22rem;
    color: #5d7568;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .status-pill {
    padding: 0.45rem 0.72rem;
    border-radius: 999px;
    background: rgba(31, 53, 40, 0.08);
    color: #244331;
    font-size: 0.84rem;
    font-weight: 700;
  }

  .error-copy {
    margin-top: 2.2rem;
    max-width: 36rem;
  }

  .error-copy h1 {
    margin: 0;
    font-size: clamp(2.4rem, 6vw, 4.8rem);
    line-height: 0.95;
    letter-spacing: -0.04em;
  }

  .error-copy p:last-child {
    margin: 1rem 0 0;
    color: #587063;
    font-size: 1rem;
    line-height: 1.6;
  }

  .error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 2rem;
  }

  .primary-link,
  .secondary-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.8rem;
    padding: 0.7rem 1.15rem;
    border-radius: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition:
      transform 140ms ease,
      box-shadow 140ms ease,
      background 140ms ease;
  }

  .primary-link {
    background: #274934;
    color: #fff;
    box-shadow: 0 14px 28px rgba(39, 73, 52, 0.22);
  }

  .secondary-link {
    border: 1px solid rgba(39, 73, 52, 0.14);
    background: rgba(255, 255, 255, 0.72);
    color: #244331;
  }

  .primary-link:hover,
  .secondary-link:hover {
    transform: translateY(-1px);
  }

  @media (max-width: 640px) {
    .error-stage {
      padding: 1rem;
    }

    .error-card {
      padding: 1.35rem;
      border-radius: 1.15rem;
    }

    .error-header {
      align-items: flex-start;
      flex-direction: column;
    }

    .error-actions {
      flex-direction: column;
    }
  }
</style>
