---
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_</span>
          </h1>
          <div class="hero-meta">
            <span class="meta-item">TAURI V2 + VITE</span>
            <span class="meta-divider">/</span>
            <span class="meta-item">CODEMIRROR 6</span>
            <span class="meta-divider">/</span>
            <span class="meta-item">v{version}</span>
          </div>
          <p class="hero-description">
            The graphical frontend ("The Body") for the Zaguán AI system. 
            Built with Vite + React Router as recommended by Tauri developers.
            A lightweight, high-performance interface with deep AI integration through the Blade Protocol.
            Supports Local AI via Ollama and OpenAI-compatible connections.
          </p>
          <div class="hero-actions">
            <a href="#download" class="action-primary">
              <span class="action-text">GET_ZBLADE()</span>
              <span class="action-arrow">→</span>
            </a>
            <a href="#features" class="action-secondary">EXPLORE_FEATURES</a>
          </div>
        </div>
      </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="features">
      <div class="features-header">
        <div class="container">
          <div class="section-label">[001] WHY_ZBLADE</div>
          <h2 class="section-title">Built Different<br/>Performs Different</h2>
        </div>
      </div>
      <div class="features-layout">
        <div class="feature-primary">
          <div class="feature-num">01</div>
          <div class="feature-content">
            <h3>TAURI V2 + VITE</h3>
            <p>Native performance with Vite's lightning-fast build system and React Router. Custom CodeMirror 6 editor with "Vertical Diff Blocks" for AI code generation. Built following Tauri's recommended stack.</p>
            <div class="feature-tag">PERFORMANCE</div>
          </div>
        </div>
        
        <div class="feature-row">
          <div class="feature-item">
            <div class="feature-num">02</div>
            <h3>BLADE PROTOCOL V2</h3>
            <p>Real-time sync between editor and AI. The protocol allows the AI to "pilot" the editor with seamless state management.</p>
          </div>
          <div class="feature-item feature-highlight">
            <div class="feature-num">03</div>
            <h3>WEB RESEARCH VISUALIZATION</h3>
            <p>See what the AI is reading and thinking. Visualize research context as the AI gathers information from the web.</p>
          </div>
        </div>
        
        <div class="feature-row">
          <div class="feature-item feature-highlight">
            <div class="feature-num">04</div>
            <h3>BODY/BRAIN SEPARATION</h3>
            <p>Lightweight GUI client with zero AI logic. All intelligence lives in the external Go-powered brain (zcoderd).</p>
          </div>
          <div class="feature-item">
            <div class="feature-num">05</div>
            <h3>MULTI-MODEL ACCESS</h3>
            <p>Connect to multiple AI models through the backend. Smart routing and context management for optimal results.</p>
          </div>
        </div>
        
        <div class="feature-banner">
          <div class="banner-content">
            <div class="banner-text">ALPHA SOFTWARE / UNDER ACTIVE DEVELOPMENT / BUILT FOR DEVELOPERS</div>
          </div>
        </div>
      </div>
    </section>

    <!-- How It Works Section -->
    <section class="architecture-section">
      <div class="container">
        <div class="section-label">[002] 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>THE BODY</h3>
            <p>Zaguán Blade<br/>Tauri v2 + Vite + React<br/>User interface only</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>THE BRAIN</h3>
            <p>zcoderd (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>BLADE PROTOCOL</h3>
            <p>Communication layer<br/>Real-time sync<br/>AI editor control</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">v0.1.0 / 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">v0.1.0 / 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">v0.1.0 / 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>Alpha software. AI features require active <a href="https://zaguanai.com/pricing">Zaguán AI subscription</a> and running zcoderd instance.</span>
        </div>
      </div>
    </section>
  </main>
</BaseLayout>