---
import { DOCS_URL } from "../consts";

const local = [
  { name: " ..", size: "DIR", kind: "dir" },
  { name: " Documents/", size: "DIR", kind: "dir" },
  { name: " backup.tar.gz", size: "1.2 GB", kind: "file" },
  { name: " id_ed25519", size: "411 B", kind: "file" },
  { name: " notes.md", size: "8.4 KB", kind: "file" },
];
const remote = [
  { name: " ..", size: "DIR", kind: "dir" },
  { name: " html/", size: "DIR", kind: "sel" },
  { name: " .env", size: "220 B", kind: "file" },
  { name: " docker-compose.yml", size: "1.7 KB", kind: "file" },
  { name: " logs/", size: "DIR", kind: "dir" },
];
const status = "↹ switch · ↑↓ move · ↵ open · SPACE transfer";
---

<section class="mx-auto max-w-5xl px-4 pt-12">
  <p class="text-green text-sm tracking-widest uppercase">
    // terminal file transfer
  </p>
  <div
    class="mt-4 overflow-hidden rounded-lg border border-line bg-mantle shadow-2xl"
  >
    <div class="border-b border-line bg-crust px-3 py-2 text-xs text-overlay">
      termscp — 192.168.1.10 (sftp) connected<span class="blink ml-1"></span>
    </div>
    <div class="grid grid-cols-2 bg-base">
      <div>
        <div
          class="border-b border-line bg-mantle px-3 py-1.5 text-xs text-teal"
        >
          /home/veeso (local)
        </div>
        {
          local.map((r) => (
            <div
              class={`flex justify-between gap-2 px-3 py-0.5 text-sm ${r.kind === "dir" ? "text-blue" : "text-text"}`}
            >
              <>
                <span class="truncate min-w-0">{r.name}</span>
                <span class="text-overlay shrink-0">{r.size}</span>
              </>
            </div>
          ))
        }
      </div>
      <div class="border-l border-line">
        <div
          class="border-b border-line bg-mantle px-3 py-1.5 text-xs text-mauve"
        >
          /var/www (remote)
        </div>
        {
          remote.map((r) => (
            <div
              class={`flex justify-between gap-2 px-3 py-0.5 text-sm ${
                r.kind === "sel"
                  ? "bg-blue text-base font-bold"
                  : r.kind === "dir"
                    ? "text-blue"
                    : "text-text"
              }`}
            >
              <span class="truncate min-w-0">{r.name}</span>
              <span
                class={`shrink-0 ${r.kind === "sel" ? "text-base" : "text-overlay"}`}
              >
                {r.size}
              </span>
            </div>
          ))
        }
      </div>
    </div>
    {
      /* set:html is safe: status is a static author-controlled string, never user input. */
    }
    <div
      class="flex justify-between border-t border-line bg-crust px-3 py-1.5 text-xs text-overlay"
    >
      <span
        set:html={status.replace(
          /(↹|↑↓|↵|SPACE)/g,
          '<span class="text-yellow">$1</span>',
        )}
      />
      <span>4 files · 1.2 GB</span>
    </div>
    <div class="bg-base px-6 py-6 text-center">
      <h1 class="text-2xl font-bold text-text">
        The dual-pane explorer for your terminal
      </h1>
      <p class="mx-auto mt-2 max-w-xl text-subtext">
        Local left, remote right. Transfer, sync, edit — never leave the
        keyboard.
      </p>
      <div class="mt-5 flex flex-wrap justify-center gap-3">
        <a
          href="/install"
          class="rounded-lg bg-green px-5 py-2.5 font-bold text-crust"
          >Install termscp →</a
        >
        <a
          href={DOCS_URL}
          class="rounded-lg border border-line px-5 py-2.5 text-text"
          >User manual</a
        >
      </div>
    </div>
  </div>
</section>
