<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>nsyte - Publish to the Decentralized Web</title>
    <meta
      name="description"
      content="A command-line tool for publishing websites to nostr and Blossom servers. Decentralized, censorship-resistant website hosting."
    >

    <!-- Favicon -->
    <link
      rel="icon"
      type="image/svg+xml"
      href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌐</text></svg>"
    >

    <!-- Preload critical fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&display=swap"
      rel="stylesheet"
    >

    <!-- CSS -->
    <style>
      /* Cypherpunk theme variables — Phase 10 (deeper near-black base) */
      /* Body text #d4d4d8 on #06070d = 13.61:1 (WCAG AAA); accent #34d399 on #06070d = 10.46:1 (AAA) */
      :root {
        --cyber-bg: #06070d;
        --cyber-surface: #0d0e18;
        --cyber-surface-variant: #15172a;
        --cyber-border: #22243a;
        --cyber-text: #d4d4d8;
        --cyber-text-secondary: #a1a1aa;
        --cyber-text-muted: #71717a;
        --cyber-accent: #34d399;
        --cyber-accent-bright: #6ee7b7;
        --cyber-accent-dim: #10b981;
        --cyber-purple: #8b5cf6;
        --cyber-blue: #3b82f6;
        --cyber-warning: #f59e0b;
        --cyber-error: #ef4444;
        --cyber-font-mono:
          "JetBrains Mono",
          "SF Mono",
          Monaco,
          "Cascadia Code",
          "Roboto Mono",
          Consolas,
          "Courier New",
          monospace;
        --cyber-font-sans:
          "Space Grotesk",
          -apple-system,
          BlinkMacSystemFont,
          system-ui,
          sans-serif;
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: var(--cyber-font-sans);
        background: var(--cyber-bg);
        color: var(--cyber-text);
        font-size: 15px;
        line-height: 1.5;
        overflow-x: hidden;
        transition: all 0.3s ease;
      }

      /* Hero Section with animated background */
      .hero {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        background: linear-gradient(
          135deg,
          var(--cyber-bg) 0%,
          var(--cyber-surface) 50%,
          var(--cyber-bg) 100%
        );
        overflow: hidden;
        border-bottom: 1px solid var(--cyber-border);
        padding: 2rem 0;
      }

      /* Animated geometric background */
      .hero::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background:
          radial-gradient(circle at 20% 30%, rgba(52, 211, 153, 0.08) 0%, transparent 50%),
          radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.06) 0%, transparent 50%),
          radial-gradient(circle at 40% 80%, rgba(59, 130, 246, 0.04) 0%, transparent 50%);
      }

      /* Floating particles */
      .hero-particles {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        overflow: hidden;
      }

      .particle {
        position: absolute;
        width: 2px;
        height: 2px;
        background: var(--cyber-accent);
        border-radius: 50%;
        opacity: 0.4;
        animation: float-particle linear infinite;
      }

      .particle:nth-child(odd) {
        background: var(--cyber-purple);
        opacity: 0.3;
      }

      .particle:nth-child(3n) {
        background: var(--cyber-blue);
        opacity: 0.2;
      }

      @keyframes float-particle {
        0% {
          transform: translateY(100vh) translateX(0);
          opacity: 0;
        }
        10% {
          opacity: 0.4;
        }
        90% {
          opacity: 0.4;
        }
        100% {
          transform: translateY(-100px) translateX(100px);
          opacity: 0;
        }
      }

      .hero-content {
        position: relative;
        z-index: 10;
        max-width: 560px;
        margin: 0 auto;
        padding: 0 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        align-items: center;
        text-align: center;
        width: 100%;
      }

      .hero-text {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        align-items: center;
      }

      /* Top-Link Nav */
      .top-nav {
        display: flex;
        gap: 1rem;
        padding: 0.5rem 0;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        width: 100%;
      }

      .top-nav a {
        display: inline-block;
        padding: 0.5rem 1rem;
        color: var(--cyber-text);
        text-decoration: none;
        font-family: var(--cyber-font-sans);
        font-size: 15px;
        font-weight: 400;
        line-height: 1.5;
        transition: color 0.2s ease;
      }

      .top-nav a:hover {
        color: var(--cyber-accent);
        text-decoration: underline;
        text-underline-offset: 4px;
      }

      .top-nav a:focus-visible {
        outline: 2px solid var(--cyber-accent);
        outline-offset: 2px;
        color: var(--cyber-accent);
        text-decoration: underline;
        text-underline-offset: 4px;
      }

      .top-nav a:visited {
        color: var(--cyber-text);
      }

      .hero-title {
        font-size: clamp(2.5rem, 6.5vw, 5rem);
        font-weight: 600;
        margin: 0;
        color: var(--cyber-text);
        font-family: "Space Grotesk", var(--cyber-font-sans);
        letter-spacing: -1px;
        line-height: 1.1;
        position: relative;
        display: inline-block;
      }

      .hero-title::before {
        content: ">";
        position: absolute;
        right: 100%;
        top: 50%;
        transform: translateY(-50%);
        margin-right: 0.35em;
        color: var(--cyber-accent);
        font-family: var(--cyber-font-mono);
        font-size: 0.8em;
        font-weight: 600;
        animation: cursor-blink 1.5s infinite;
      }

      @keyframes cursor-blink {
        0%, 50% {
          opacity: 1;
        }
        51%, 100% {
          opacity: 0;
        }
      }

      .hero-tagline {
        font-size: clamp(0.875rem, 1.6vw, 1.05rem);
        font-weight: 400;
        margin: 0;
        color: var(--cyber-text-secondary);
        font-family: var(--cyber-font-mono);
        opacity: 0.95;
        letter-spacing: 0;
        line-height: 1.4;
      }

      /* Compact Install Component */
      .install-component {
        max-width: 560px;
        width: 100%;
        text-align: center;
      }

      .install-code {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        background: var(--cyber-surface);
        border: 1px solid var(--cyber-border);
        border-radius: 6px;
        padding: 0.625rem 0.625rem 0.625rem 1rem;
        transition: border-color 0.2s ease;
      }

      .install-code:hover,
      .install-code:focus-within {
        border-color: var(--cyber-accent);
      }

      .install-code code {
        flex: 1 1 auto;
        overflow-x: auto;
        white-space: nowrap;
        word-break: normal;
        text-align: left;
        font-family: var(--cyber-font-mono);
        font-size: 13px;
        line-height: 1.5;
        color: var(--cyber-text);
        scrollbar-width: none;
      }

      .install-code code::-webkit-scrollbar {
        display: none;
      }

      .copy-btn {
        flex: 0 0 auto;
        padding: 0.375rem 0.75rem;
        border-radius: 4px;
        background: transparent;
        color: var(--cyber-accent);
        border: 1px solid var(--cyber-border);
        font-family: var(--cyber-font-mono);
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.75px;
        cursor: pointer;
        transition: all 0.2s ease;
      }

      .copy-btn:hover {
        background: var(--cyber-accent);
        color: var(--cyber-bg);
        border-color: var(--cyber-accent);
      }

      .copy-btn.copied {
        background: var(--cyber-accent-dim);
        color: var(--cyber-bg);
        border-color: var(--cyber-accent-dim);
        cursor: default;
      }

      .copy-btn:focus-visible {
        outline: 2px solid var(--cyber-accent);
        outline-offset: 2px;
      }

      .more-install-link {
        display: inline-block;
        margin-top: 0.75rem;
        color: var(--cyber-text-muted);
        font-family: var(--cyber-font-sans);
        font-size: 13px;
        font-weight: 400;
        line-height: 1.5;
        text-decoration: none;
        transition: color 0.2s ease;
      }

      .more-install-link:hover {
        color: var(--cyber-accent);
      }

      .more-install-link:focus-visible {
        outline: 2px solid var(--cyber-accent);
        outline-offset: 2px;
        color: var(--cyber-accent);
      }

      /* Responsive Design */
      @media (max-width: 968px) {
        .hero-content {
          padding: 0 1rem;
        }
      }

      @media (max-width: 480px) {
        .hero {
          padding: 1.5rem 0;
        }

        .top-nav {
          gap: 0.25rem 0.75rem;
        }

        .top-nav a {
          padding: 0.375rem 0.5rem;
          font-size: 14px;
        }

        .install-code {
          padding: 0.5rem 0.5rem 0.5rem 0.75rem;
        }

        .install-code code {
          font-size: 12px;
        }
      }

      /* Animations */
      @keyframes fadeInUp {
        from {
          opacity: 0;
          transform: translateY(30px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .particle {
          animation: none;
        }
        .hero-title::before {
          animation: none;
        }
        .hero-content > * {
          animation: none;
        }
      }

      .hero-content > * {
        animation: fadeInUp 0.8s ease forwards;
      }

      .hero-content > *:nth-child(2) {
        animation-delay: 0.1s;
      }
      .hero-content > *:nth-child(3) {
        animation-delay: 0.2s;
      }
      .hero-content > *:nth-child(4) {
        animation-delay: 0.3s;
      }
      .hero-content > *:nth-child(5) {
        animation-delay: 0.4s;
      }
    </style>
  </head>
  <body>
    <!-- Hero Section -->
    <section class="hero">
      <!-- Animated particles background -->
      <div class="hero-particles" id="particles"></div>

      <div class="hero-content">
        <div class="hero-text">
          <h1 class="hero-title">nsyte</h1>
          <p class="hero-tagline">Unstoppable publishing for the sovereign web</p>
        </div>

        <nav class="top-nav" aria-label="Primary">
          <a href="/docs/">Docs</a>
          <a href="https://github.com/sandwichfarm/nsyte" target="_blank" rel="noopener noreferrer"
          >GitHub</a>
          <a
            href="https://github.com/sandwichfarm/nsyte/releases"
            target="_blank"
            rel="noopener noreferrer"
          >Releases</a>
        </nav>

        <div class="install-component" id="install">
          <div class="install-code">
            <code>curl -fsSL https://nsyte.run/install.sh | bash</code>
            <button
              class="copy-btn"
              data-copy="curl -fsSL https://nsyte.run/install.sh | bash"
              aria-label="Copy install command"
            >
              Copy
            </button>
          </div>
          <a class="more-install-link" href="/docs/installation/">More install options &#8594;</a>
        </div>
      </div>
    </section>

    <!-- JavaScript -->
    <script>
      // Copy functionality
      function initializeCopyButtons() {
        const copyButtons = document.querySelectorAll(".copy-btn");

        copyButtons.forEach((button) => {
          button.addEventListener("click", async () => {
            const textToCopy = button.getAttribute("data-copy");

            try {
              await navigator.clipboard.writeText(textToCopy);
              showCopySuccess(button);
            } catch (err) {
              // Fallback for older browsers
              const textArea = document.createElement("textarea");
              textArea.value = textToCopy;
              document.body.appendChild(textArea);
              textArea.select();
              document.execCommand("copy");
              document.body.removeChild(textArea);
              showCopySuccess(button);
            }
          });
        });

        function showCopySuccess(button) {
          const originalText = button.textContent;
          button.textContent = "Copied!";
          button.classList.add("copied");

          setTimeout(() => {
            button.textContent = originalText;
            button.classList.remove("copied");
          }, 1500);
        }
      }

      // Smooth scrolling
      function initializeSmoothScrolling() {
        const links = document.querySelectorAll('a[href^="#"]');

        links.forEach((link) => {
          link.addEventListener("click", (e) => {
            const targetId = link.getAttribute("href").substring(1);
            const targetElement = document.getElementById(targetId);

            if (targetElement) {
              e.preventDefault();
              targetElement.scrollIntoView({
                behavior: "smooth",
                block: "start",
              });
              // Update the URL hash so the in-page anchor is reflected in
              // history/window.location (must_haves contract for #install).
              if (window.location.hash !== "#" + targetId) {
                history.pushState(null, "", "#" + targetId);
              }
            }
          });
        });
      }

      // Animated particles
      function createParticles() {
        const particlesContainer = document.getElementById("particles");
        const particleCount = 50;

        for (let i = 0; i < particleCount; i++) {
          const particle = document.createElement("div");
          particle.className = "particle";

          // Random horizontal position
          particle.style.left = Math.random() * 100 + "%";

          // Random animation duration and delay
          const duration = Math.random() * 20 + 10; // 10-30 seconds
          const delay = Math.random() * 10; // 0-10 seconds delay

          particle.style.animationDuration = duration + "s";
          particle.style.animationDelay = delay + "s";

          particlesContainer.appendChild(particle);
        }
      }

      // Initialize everything when DOM is loaded
      document.addEventListener("DOMContentLoaded", () => {
        initializeCopyButtons();
        initializeSmoothScrolling();
        createParticles();
      });
    </script>
  </body>
</html>
