---
import BaseLayout from '../layouts/BaseLayout.astro';
import pkg from '../../package.json';

const version = pkg.version ?? "";
---

<BaseLayout title="Zaguán Blade - AI-Native Code Editor">
  <main>
    <!-- Hero Section -->
    <section class="hero">
      <div class="hero-bg-elements">
        <div class="hero-block hero-block-1"></div>
        <div class="hero-block hero-block-2"></div>
        <div class="scanline"></div>
      </div>
      <div class="container">
        <div class="hero-content">
          <div class="hero-label">// NEXT-GEN EDITOR</div>
          <h1 class="hero-title">
            <span class="title-line-1">ZAGUÁN</span>
            <span class="title-line-2">BLADE</span>
            <span class="title-accent">AI-NATIVE CODE EDITOR</span>
          </h1>
          <div class="hero-meta">
            <span class="meta-item">RUNS LOCAL</span>
            <span class="meta-divider">/</span>
            <span class="meta-item">WHOLE PROJECT CONTEXT</span>
            <span class="meta-divider">/</span>
            <span class="meta-item">NO CLOUD REQUIRED</span>
          </div>
          <p class="hero-description">
            Zaguán Blade + zcoderd are built for long-running coding sessions. In our 250-turn benchmark, context compression and selective retrieval reduced token cost by ~31% on average, with higher gains in context-heavy runs. It’s not always cheaper in lean sessions — it’s designed to prevent context bloat when history grows.
          </p>
          <div class="hero-actions">
            <a href="#download" class="action-primary">
              <span class="action-text">RUN AI LOCALLY. START HERE.</span>
              <span class="action-arrow">→</span>
            </a>
            <a href="/blog/measuring-token-savings" class="action-secondary">SEE THE BENCHMARK</a>
          </div>
        </div>
      </div>
      
      <!-- Screenshot Reveal -->
      <div class="container" style="margin-top: var(--space-2xl); position: relative; z-index: 2; display: flex; justify-content: center;">
        <div style="width: min(100%, 960px); aspect-ratio: 16 / 9; border: 1px solid var(--color-border); border-radius: var(--border-radius); overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 30px rgba(0,221,119,0.1); background: var(--color-bg-elevated); padding: 2px;">
          <video src="/zblade.mp4" autoplay muted playsinline loop preload="auto" style="width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--border-radius);">
            Your browser does not support the video tag.
          </video>
        </div>
      </div>
    </section>

    <!-- Philosophy Section -->
    <section id="philosophy" class="features" style="padding-top: var(--space-3xl);">
      <div class="features-header">
        <div class="container">
          <div class="section-label">[001] WHY_ZBLADE</div>
          <h2 class="section-title">Built for Control<br/>Not Bloat</h2>
        </div>
      </div>
      <div class="features-layout">
        <div class="feature-primary">
          <div class="feature-content" style="max-width: 800px; margin: 0 auto; text-align: left;">
            <p style="font-size: 1.25rem; line-height: 1.6; margin-bottom: var(--space-md);">
              <strong>Zaguán Blade was built because modern AI editors feel bloated, opaque and cloud-dependent.</strong>
            </p>
            <p style="font-size: 1.1rem; line-height: 1.6; margin-bottom: var(--space-md);">
              Blade separates the UI from the AI daemon, keeps resource usage low, and respects Git as the source of truth. It’s built for engineers who care about control and hate silent failures.
            </p>
            <p style="font-size: 1.1rem; line-height: 1.6; color: var(--color-text-muted);">
              Used daily to develop Zaguán Blade and zcoderd. Tested on real production projects.
            </p>
          </div>
        </div>

        <div class="feature-row" style="margin-top: var(--space-xl);">
          <div class="feature-item feature-highlight" style="display: flex; flex-direction: column; justify-content: center;">
            <h3>THE LIGHTWEIGHT DIFFERENCE</h3>
            <p>Engineers trust metrics. Here is what idle resource usage looks like:</p>
            <table style="width: 100%; margin-top: var(--space-md); border-collapse: collapse; text-align: left;">
              <thead>
                <tr style="border-bottom: 1px solid var(--color-border);">
                  <th style="padding: var(--space-sm) 0; color: var(--color-text-muted);">Tool</th>
                  <th style="padding: var(--space-sm) 0; color: var(--color-text-muted);">Idle RAM</th>
                </tr>
              </thead>
              <tbody>
                <tr style="border-bottom: 1px solid var(--color-border); font-weight: bold; color: var(--color-primary);">
                  <td style="padding: var(--space-sm) 0;">Zaguán Blade</td>
                  <td style="padding: var(--space-sm) 0;">~320 MB</td>
                </tr>
                <tr style="border-bottom: 1px solid var(--color-border);">
                  <td style="padding: var(--space-sm) 0;">VSCode + AI</td>
                  <td style="padding: var(--space-sm) 0;">~1.9 GB</td>
                </tr>
                <tr>
                  <td style="padding: var(--space-sm) 0;">Windsurf</td>
                  <td style="padding: var(--space-sm) 0;">~2.8 GB</td>
                </tr>
              </tbody>
            </table>
          </div>
          
          <div class="feature-item">
            <h3>NOT FOR EVERYONE</h3>
            <ul style="list-style: none; padding: 0; margin-top: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm);">
              <li style="padding-left: 1.5rem; position: relative;">
                <span style="position: absolute; left: 0; color: var(--color-primary);">→</span>
                If you want a VSCode clone, this isn’t it.
              </li>
              <li style="padding-left: 1.5rem; position: relative;">
                <span style="position: absolute; left: 0; color: var(--color-primary);">→</span>
                If you need heavy UI plugins, this isn’t it.
              </li>
              <li style="padding-left: 1.5rem; position: relative; font-weight: bold; color: var(--color-text);">
                <span style="position: absolute; left: 0; color: var(--color-primary);">→</span>
                If you want lightweight, controlled AI workflows — this is for you.
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <!-- Workflow Section -->
    <section id="workflow" class="features">
      <div class="features-header">
        <div class="container">
          <div class="section-label">[002] WORKFLOW</div>
          <h2 class="section-title">Engineers Think<br/>in Workflows</h2>
        </div>
      </div>
      <div class="features-layout">
        <div class="feature-row">
          <div class="feature-item">
            <div class="feature-num">01</div>
            <h3>WHAT IT'S ACTUALLY GOOD AT</h3>
            <ul style="list-style: none; padding: 0; margin-top: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm);">
              <li style="padding-left: 1.5rem; position: relative;"><span style="position: absolute; left: 0; color: var(--color-primary);">+</span> <strong>Refactoring</strong> across multiple files.</li>
              <li style="padding-left: 1.5rem; position: relative;"><span style="position: absolute; left: 0; color: var(--color-primary);">+</span> <strong>Updating</strong> changelogs and build configs.</li>
              <li style="padding-left: 1.5rem; position: relative;"><span style="position: absolute; left: 0; color: var(--color-primary);">+</span> <strong>Reviewing</strong> AI patches safely with diff control.</li>
              <li style="padding-left: 1.5rem; position: relative;"><span style="position: absolute; left: 0; color: var(--color-primary);">+</span> <strong>Running</strong> locally with your own models.</li>
            </ul>
          </div>
          <div class="feature-item feature-highlight">
            <div class="feature-num">02</div>
            <h3>TYPICAL FLOW IN BLADE</h3>
            <ol style="padding-left: 1.5rem; margin-top: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); font-family: var(--font-mono);">
              <li>Ask for change.</li>
              <li>AI calls project tools.</li>
              <li>Diff appears.</li>
              <li>You review.</li>
              <li>Accept or revert via Git.</li>
            </ol>
            <p style="margin-top: var(--space-md);">No magic behind the scenes. Just predictable operations and complete transparency.</p>
          </div>
        </div>
        
        <div class="feature-banner" style="display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-md);">
          <div class="banner-content">
            <div class="banner-text">ACTIVE DEVELOPMENT: PRE-V1.0</div>
          </div>
          <p style="color: var(--color-bg); font-weight: 500; max-width: 800px; margin: 0 auto; line-height: 1.6;">
            Zaguán Blade is under heavy development. Expect rapid updates, occasional breaking changes, and a fast feedback loop as we build toward v1.0.0.
          </p>
        </div>
      </div>
    </section>

    <!-- How It Works Section -->
    <section class="architecture-section">
      <div class="container">
        <div class="section-label">[003] ARCHITECTURE</div>
        <div class="arch-grid">
          <div class="arch-node">
            <div class="node-header">
              <div class="node-num">1</div>
              <div class="node-status">ACTIVE</div>
            </div>
            <h3>Zaguán Blade (UI)</h3>
            <p>Tauri v2 + Vite + React<br/>User interface only.<br/>Lightning fast.</p>
            <div class="node-connector"></div>
          </div>
          
          <div class="arch-node arch-node-center">
            <div class="node-header">
              <div class="node-num">2</div>
              <div class="node-status">ACTIVE</div>
            </div>
            <h3>zcoderd (AI daemon)</h3>
            <p>Go server<br/>State management<br/>Tool execution & AI</p>
            <div class="node-connector"></div>
          </div>
          
          <div class="arch-node">
            <div class="node-header">
              <div class="node-num">3</div>
              <div class="node-status">ACTIVE</div>
            </div>
            <h3>Model Provider</h3>
            <p>Local or remote.<br/>Ollama, Anthropic, OpenAI, etc.<br/>You choose.</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Pricing Section -->
    <section class="pricing">
      <div class="pricing-container">
        <div class="pricing-block">
          <div class="section-label">[003] SUBSCRIPTION_MODEL</div>
          <h2 class="pricing-title">ZAGUÁN AI<br/>REQUIRED</h2>
          <div class="pricing-grid">
            <div class="pricing-item">
              <div class="pricing-label">WITHOUT SUBSCRIPTION</div>
              <div class="pricing-value">Solid text editor</div>
            </div>
            <div class="pricing-divider"></div>
            <div class="pricing-item pricing-item-highlight">
              <div class="pricing-label">WITH SUBSCRIPTION</div>
              <div class="pricing-value">Full AI power unlocked</div>
            </div>
          </div>
          <div class="pricing-features">
            <span>Multi-model access</span>
            <span>Priority support</span>
            <span>Early features</span>
            <span>Regular updates</span>
          </div>
          <a href="https://zaguanai.com/pricing" class="pricing-action" target="_blank" rel="noopener">
            <span>VIEW_PRICING()</span>
            <span class="action-arrow">→</span>
          </a>
        </div>
      </div>
    </section>

    <!-- Download Section -->
    <section id="download" class="download">
      <div class="download-layout">
        <div class="download-header">
          <div class="section-label">[004] DOWNLOAD_ZBLADE</div>
          <h2 class="download-title">Choose Your<br/>Platform</h2>
        </div>
        <div class="download-grid">
          <a href="https://github.com/ZaguanLabs/ZaguanBlade/releases" class="platform-card platform-windows" target="_blank" rel="noopener">
            <div class="platform-icon">🪟</div>
            <div class="platform-info">
              <div class="platform-name">WINDOWS</div>
              <div class="platform-meta">v{version} / x64, arm64</div>
              <div class="platform-formats">MSI, EXE</div>
            </div>
            <div class="platform-action">DOWNLOAD →</div>
          </a>
          
          <a href="https://github.com/ZaguanLabs/ZaguanBlade/releases" class="platform-card platform-mac" target="_blank" rel="noopener">
            <div class="platform-icon">🍎</div>
            <div class="platform-info">
              <div class="platform-name">macOS</div>
              <div class="platform-meta">v{version} / arm64 (Apple Silicon)</div>
              <div class="platform-formats">DMG, TAR.GZ</div>
            </div>
            <div class="platform-action">DOWNLOAD →</div>
          </a>
          
          <a href="https://github.com/ZaguanLabs/ZaguanBlade/releases" class="platform-card platform-linux" target="_blank" rel="noopener">
            <div class="platform-icon">🐧</div>
            <div class="platform-info">
              <div class="platform-name">LINUX</div>
              <div class="platform-meta">v{version} / amd64</div>
              <div class="platform-formats">DEB, RPM, AppImage</div>
            </div>
            <div class="platform-action">DOWNLOAD →</div>
          </a>
        </div>
        <div class="download-disclaimer">
          <span class="disclaimer-icon">⚠</span>
          <span>Pre-v1.0 software. Breaking changes may occur. AI features require an active <a href="https://zaguanai.com/pricing">Zaguán AI subscription</a>.</span>
        </div>
      </div>
    </section>
  </main>
</BaseLayout>
