---
import BaseLayout from '../layouts/BaseLayout.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';

const base = import.meta.env.BASE_URL;
---

<BaseLayout title="Human-Led AI Development Team">
  <Header />

  <!-- Hero -->
  <section class="relative overflow-hidden min-h-[calc(100vh-3.5rem)] flex items-center">
    <!-- Animated gradient mesh background -->
    <div class="absolute inset-0 bg-gradient-to-br from-squad-50 via-white to-accent-50/50 dark:from-navy-950 dark:via-surface-950 dark:to-surface-950"></div>
    <div class="hero-glow absolute inset-0 overflow-hidden">
      <div class="absolute -top-1/4 -left-1/4 w-[60%] h-[60%] rounded-full bg-squad-400/15 dark:bg-squad-500/10 blur-[100px] animate-float-slow"></div>
      <div class="absolute -bottom-1/4 -right-1/4 w-[50%] h-[50%] rounded-full bg-accent-300/10 dark:bg-accent-600/8 blur-[100px] animate-float-slow-reverse"></div>
      <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[40%] h-[40%] rounded-full bg-navy-400/8 dark:bg-navy-400/5 blur-[80px] animate-pulse-subtle"></div>
    </div>

    <div class="relative w-full max-w-7xl mx-auto px-4 py-16 sm:py-20 sm:px-6 lg:px-8 lg:py-24">
      <div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
        <!-- Left: Text content -->
        <div class="text-center lg:text-left">
          <div class="animate-fade-up inline-flex items-center gap-2 bg-white/70 dark:bg-white/5 backdrop-blur-sm border border-squad-200/60 dark:border-squad-500/20 text-squad-700 dark:text-squad-300 px-4 py-1.5 rounded-full text-sm font-medium mb-8">
            <span class="relative flex h-2 w-2">
              <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-squad-400 opacity-75"></span>
              <span class="relative inline-flex rounded-full h-2 w-2 bg-squad-500"></span>
            </span>
            Alpha — Rapidly evolving
          </div>

          <h1 class="animate-fade-up-scale delay-100 text-5xl sm:text-6xl lg:text-7xl font-extrabold tracking-tight text-surface-900 dark:text-white mb-6 leading-[1.1]">
            Your agents <span class="bg-gradient-to-r from-squad-600 via-squad-500 to-squad-400 bg-clip-text text-transparent">bring your ideas to life</span>
          </h1>

          <p class="animate-fade-up delay-300 text-lg sm:text-xl text-surface-600 dark:text-surface-300 mb-10 leading-relaxed max-w-xl mx-auto lg:mx-0">
            Describe what you're building. Squad coordinates agents that live in your repo and grow with your code. You spend less time prompting, more time deciding, and convert ideas into product more efficiently than ever before.
          </p>

          <div class="animate-fade-up delay-500 flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4 mb-12">
            <a
              href={`${base}docs/get-started/installation/`}
              class="group w-full sm:w-auto inline-flex items-center justify-center gap-2 px-7 py-3.5 rounded-xl bg-squad-600 hover:bg-squad-500 text-white font-semibold transition-all shadow-lg shadow-squad-600/25 hover:shadow-xl hover:shadow-squad-500/30 hover:-translate-y-0.5"
            >
              Get Started
              <svg class="w-4 h-4 transition-transform group-hover:translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
              </svg>
            </a>
            <a
              href="https://github.com/bradygaster/squad"
              target="_blank"
              rel="noopener"
              class="group w-full sm:w-auto inline-flex items-center justify-center gap-2 px-7 py-3.5 rounded-xl border border-surface-200 dark:border-surface-700 bg-white/50 dark:bg-white/5 backdrop-blur-sm text-surface-700 dark:text-surface-300 hover:bg-white dark:hover:bg-white/10 font-semibold transition-all hover:-translate-y-0.5"
            >
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" />
              </svg>
              View on GitHub
            </a>
          </div>

          <!-- Quick install snippet -->
          <div class="animate-fade-up delay-600 hidden sm:flex items-center gap-3 bg-surface-100 dark:bg-surface-800/90 backdrop-blur-sm rounded-xl px-5 py-3 max-w-md mx-auto lg:mx-0 border border-surface-200 dark:border-surface-700/50">
            <code class="text-sm font-mono text-surface-700 dark:text-surface-300 flex-1 truncate">npm i -g @bradygaster/squad-cli</code>
            <button id="copy-install" class="text-surface-400 hover:text-surface-900 dark:text-surface-500 dark:hover:text-white transition-colors shrink-0" aria-label="Copy install command">
              <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
              </svg>
            </button>
          </div>
        </div>

        <!-- Right: Terminal demo -->
        <div class="animate-fade-up delay-400 space-y-6">
          <div class="relative">
            <!-- Glow behind terminal -->
            <div class="absolute -inset-4 bg-gradient-to-r from-squad-500/20 via-accent-400/15 to-navy-500/20 dark:from-squad-500/10 dark:via-accent-400/8 dark:to-navy-500/10 rounded-2xl blur-2xl"></div>
            <div class="relative bg-surface-900 dark:bg-surface-800 rounded-2xl overflow-hidden shadow-2xl border border-surface-700/50">
              <div class="flex items-center gap-2 px-4 py-3 bg-surface-800/80 dark:bg-surface-700/80 border-b border-surface-700/50">
                <div class="flex gap-1.5">
                  <div class="w-3 h-3 rounded-full bg-red-500/80"></div>
                  <div class="w-3 h-3 rounded-full bg-yellow-500/80"></div>
                  <div class="w-3 h-3 rounded-full bg-green-500/80"></div>
                </div>
                <span class="text-xs text-surface-400 ml-2 font-mono">Copilot Chat</span>
              </div>
              <div class="p-5 sm:p-6 font-mono text-xs sm:text-sm space-y-4">
                <div>
                  <p class="text-surface-500 text-xs mb-1.5">YOU</p>
                  <p class="text-surface-200 leading-relaxed">Team, build the recipe listing page. We need an API endpoint that returns recipes and a React component that displays them.</p>
                </div>
                <div class="border-t border-surface-700/50 pt-4">
                  <p class="text-surface-500 text-xs mb-3">SQUAD RESPONSE</p>
                  <div class="space-y-2.5">
                    <div class="flex items-start gap-3 agent-line" style="--delay: 0">
                      <span class="inline-flex items-center justify-center w-6 h-6 rounded-md bg-yellow-500/15 text-yellow-400 text-xs shrink-0">🏗️</span>
                      <div>
                        <span class="text-yellow-400 font-medium">Flight</span>
                        <span class="text-surface-400"> — reviewing requirements, defining API contract</span>
                      </div>
                    </div>
                    <div class="flex items-start gap-3 agent-line" style="--delay: 1">
                      <span class="inline-flex items-center justify-center w-6 h-6 rounded-md bg-blue-500/15 text-blue-400 text-xs shrink-0">⚛️</span>
                      <div>
                        <span class="text-blue-400 font-medium">EECOM</span>
                        <span class="text-surface-400"> — building RecipeList component</span>
                      </div>
                    </div>
                    <div class="flex items-start gap-3 agent-line" style="--delay: 2">
                      <span class="inline-flex items-center justify-center w-6 h-6 rounded-md bg-green-500/15 text-green-400 text-xs shrink-0">🔧</span>
                      <div>
                        <span class="text-green-400 font-medium">CAPCOM</span>
                        <span class="text-surface-400"> — creating GET /api/recipes endpoint</span>
                      </div>
                    </div>
                    <div class="flex items-start gap-3 agent-line" style="--delay: 3">
                      <span class="inline-flex items-center justify-center w-6 h-6 rounded-md bg-purple-500/15 text-purple-400 text-xs shrink-0">🧪</span>
                      <div>
                        <span class="text-purple-400 font-medium">FIDO</span>
                        <span class="text-surface-400"> — writing test cases from requirements</span>
                      </div>
                    </div>
                    <div class="flex items-start gap-3 agent-line" style="--delay: 4">
                      <span class="inline-flex items-center justify-center w-6 h-6 rounded-md bg-surface-500/15 text-surface-400 text-xs shrink-0">📋</span>
                      <div>
                        <span class="text-surface-400 font-medium">Scribe</span>
                        <span class="text-surface-500"> — logging decisions</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="flex items-center gap-2 pt-2 border-t border-surface-700/50">
                  <div class="flex -space-x-1">
                    <div class="w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse"></div>
                    <div class="w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse" style="animation-delay: 150ms"></div>
                    <div class="w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse" style="animation-delay: 300ms"></div>
                  </div>
                  <span class="text-sm sm:text-base font-medium text-surface-500 animate-pulse">5 agents working in parallel…</span>
                </div>
              </div>
            </div>
          </div>

          <div class="rounded-2xl border border-squad-300/80 dark:border-squad-400/30 bg-gradient-to-br from-squad-50 via-accent-50/80 to-white dark:from-squad-500/12 dark:via-accent-500/10 dark:to-white/5 backdrop-blur-sm px-5 py-4 text-left shadow-lg shadow-squad-500/10">
            <p class="text-sm sm:text-base text-surface-700 dark:text-surface-300 leading-relaxed">
              <strong class="text-squad-700 dark:text-squad-300">Responsible AI, explicitly:</strong> Squad democratizes multi-agentic work and extends human development teams' capabilities. Its goal is to make an individual more productive while enabling human oversight, review, and accountability at agentic speed.
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Trust strip -->
  <section class="relative border-y border-surface-200/60 dark:border-surface-800/60 bg-surface-50/80 dark:bg-surface-900/30 backdrop-blur-sm">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-5">
      <div class="flex flex-wrap items-center justify-center gap-x-8 gap-y-2 text-lg">
        <div class="flex items-center gap-2 text-surface-600 dark:text-surface-300">
          <span class="w-1.5 h-1.5 rounded-full bg-squad-500"></span>
          <span>Humans stay in charge</span>
        </div>
        <div class="flex items-center gap-2 text-surface-600 dark:text-surface-300">
          <span class="w-1.5 h-1.5 rounded-full bg-accent-500"></span>
          <span>Built-in governance</span>
        </div>
        <div class="flex items-center gap-2 text-surface-600 dark:text-surface-300">
          <span class="w-1.5 h-1.5 rounded-full bg-navy-500"></span>
          <span>Persistent team memory</span>
        </div>
        <div class="flex items-center gap-2 text-surface-600 dark:text-surface-300">
          <span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
          <span>MIT open source</span>
        </div>
      </div>
    </div>
  </section>

  <!-- Features Grid -->
  <section class="py-20 sm:py-28 relative reveal">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center mb-16">
        <p class="text-squad-600 dark:text-squad-400 font-semibold text-sm tracking-wide uppercase mb-3">Why Squad?</p>
        <h2 class="text-3xl sm:text-4xl font-bold text-surface-900 dark:text-white mb-5">Multi-agent orchestration,<br class="hidden sm:block" /> with humans in charge</h2>
        <p class="text-lg text-surface-600 dark:text-surface-400 max-w-2xl mx-auto">
          Enforced rules, persistent teams, and accountable workflows — everything you need for AI that helps people ship responsibly.
        </p>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
        <div class="group relative p-6 rounded-2xl bg-white dark:bg-surface-900 border border-surface-200 dark:border-surface-800 hover:border-squad-300/50 dark:hover:border-squad-600/30 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-squad-500/5 md:col-span-2 lg:col-span-2">
          <div class="md:flex md:items-start md:gap-5">
            <div class="w-11 h-11 rounded-xl bg-gradient-to-br from-squad-500 to-squad-600 flex items-center justify-center mb-4 md:mb-0 text-white text-lg shadow-lg shadow-squad-500/20 shrink-0">🚀</div>
            <div>
              <h3 class="text-lg font-semibold text-surface-900 dark:text-white mb-2">Human-Directed Parallel Work</h3>
              <p class="text-surface-600 dark:text-surface-400 text-sm leading-relaxed">Give a task to the team and specialists fan out together. You set the direction, review the results, and keep the final decision. Squad uses AI-emulated specialist roles to make a real human more productive, not to replace real humans.</p>
            </div>
          </div>
        </div>

        <div class="group relative p-6 rounded-2xl bg-white dark:bg-surface-900 border border-surface-200 dark:border-surface-800 hover:border-accent-300/50 dark:hover:border-accent-600/30 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-accent-500/5">
          <div class="w-11 h-11 rounded-xl bg-gradient-to-br from-accent-500 to-accent-600 flex items-center justify-center mb-5 text-white text-lg shadow-lg shadow-accent-500/20">🧠</div>
          <h3 class="text-lg font-semibold text-surface-900 dark:text-white mb-2">Persistent Memory</h3>
          <p class="text-surface-600 dark:text-surface-400 text-sm leading-relaxed">Agents remember decisions and conventions across sessions so people spend less time repeating context and more time reviewing the work that matters.</p>
        </div>

        <div class="group relative p-6 rounded-2xl bg-white dark:bg-surface-900 border border-surface-200 dark:border-surface-800 hover:border-navy-300/50 dark:hover:border-navy-600/30 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-navy-500/5">
          <div class="w-11 h-11 rounded-xl bg-gradient-to-br from-navy-600 to-navy-700 flex items-center justify-center mb-5 text-white text-lg shadow-lg shadow-navy-500/20">🐙</div>
          <h3 class="text-lg font-semibold text-surface-900 dark:text-white mb-2">GitHub-Native</h3>
          <p class="text-surface-600 dark:text-surface-400 text-sm leading-relaxed">Squad lives in your repo as <code class="bg-surface-100 dark:bg-surface-800 px-1.5 py-0.5 rounded text-xs font-mono">.squad/</code>. Commit it, share it, clone it. Team state, decisions, and context stay inspectable with your code.</p>
        </div>

        <div class="group relative p-6 rounded-2xl bg-white dark:bg-surface-900 border border-surface-200 dark:border-surface-800 hover:border-navy-300/50 dark:hover:border-navy-600/30 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-navy-500/5 md:col-span-2 lg:col-span-2">
          <div class="md:flex md:items-start md:gap-5">
            <div class="w-11 h-11 rounded-xl bg-gradient-to-br from-navy-600 to-navy-700 flex items-center justify-center mb-4 md:mb-0 text-white text-lg shadow-lg shadow-navy-500/20 shrink-0">🛡️</div>
            <div>
              <h3 class="text-lg font-semibold text-surface-900 dark:text-white mb-2">Built-in Governance</h3>
              <p class="text-surface-600 dark:text-surface-400 text-sm leading-relaxed">File-write guards, PII scrubbing, reviewer lockout, and clear escalation points — rules enforced in code, not suggestions in prompts.</p>
            </div>
          </div>
        </div>

        <div class="group relative p-6 rounded-2xl bg-white dark:bg-surface-900 border border-surface-200 dark:border-surface-800 hover:border-accent-300/50 dark:hover:border-accent-600/30 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-accent-500/5">
          <div class="w-11 h-11 rounded-xl bg-gradient-to-br from-accent-500 to-accent-600 flex items-center justify-center mb-5 text-white text-lg shadow-lg shadow-accent-500/20">⚡</div>
          <h3 class="text-lg font-semibold text-surface-900 dark:text-white mb-2">SDK-First Design</h3>
          <p class="text-surface-600 dark:text-surface-400 text-sm leading-relaxed">Define your team in TypeScript with <code class="bg-surface-100 dark:bg-surface-800 px-1.5 py-0.5 rounded text-xs font-mono">squad.config.ts</code>. Typed, testable, version-controlled.</p>
        </div>

        <div class="group relative p-6 rounded-2xl bg-white dark:bg-surface-900 border border-surface-200 dark:border-surface-800 hover:border-squad-300/50 dark:hover:border-squad-600/30 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-squad-500/5 lg:col-span-2">
          <div class="lg:flex lg:items-start lg:gap-5">
            <div class="w-11 h-11 rounded-xl bg-gradient-to-br from-squad-500 to-squad-600 flex items-center justify-center mb-4 lg:mb-0 text-white text-lg shadow-lg shadow-squad-500/20 shrink-0">🔌</div>
            <div>
              <h3 class="text-lg font-semibold text-surface-900 dark:text-white mb-2">Extensible</h3>
              <p class="text-surface-600 dark:text-surface-400 text-sm leading-relaxed">Plugins, marketplace, MCP integration, custom hooks — extend Squad to fit your workflow.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- How it works -->
  <section class="py-20 sm:py-28 bg-surface-50 dark:bg-surface-900/30 border-y border-surface-200/50 dark:border-surface-800/50 reveal">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center mb-16">
        <p class="text-squad-600 dark:text-squad-400 font-semibold text-sm tracking-wide uppercase mb-3">How it works</p>
        <h2 class="text-3xl sm:text-4xl font-bold text-surface-900 dark:text-white">Three commands to a full team</h2>
      </div>

      <div class="flex flex-col sm:flex-row sm:items-stretch gap-8 sm:gap-4">
        <div class="flex-1 relative text-center flex flex-col items-center">
          <div class="inline-flex items-center justify-center w-12 h-12 rounded-2xl bg-squad-600 text-white font-bold text-lg mb-5 shadow-lg shadow-squad-600/25">1</div>
          <h3 class="font-semibold text-surface-900 dark:text-white mb-2">Install</h3>
          <p class="text-sm text-surface-600 dark:text-surface-400 mb-4 flex-1">One global install, zero config files required.</p>
          <code class="text-sm font-mono bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-green-400 px-3 py-1.5 rounded-lg border border-surface-200 dark:border-transparent">npm i -g @bradygaster/squad-cli</code>
        </div>
        <div class="hidden sm:flex items-start pt-4 shrink-0">
          <svg class="w-5 h-5 text-squad-300 dark:text-squad-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
        </div>
        <div class="flex-1 relative text-center flex flex-col items-center">
          <div class="inline-flex items-center justify-center w-12 h-12 rounded-2xl bg-squad-600 text-white font-bold text-lg mb-5 shadow-lg shadow-squad-600/25">2</div>
          <h3 class="font-semibold text-surface-900 dark:text-white mb-2">Initialize</h3>
          <p class="text-sm text-surface-600 dark:text-surface-400 mb-4 flex-1">Describe your project and Squad generates a team you direct.</p>
          <code class="text-sm font-mono bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-green-400 px-3 py-1.5 rounded-lg border border-surface-200 dark:border-transparent">squad init</code>
        </div>
        <div class="hidden sm:flex items-start pt-4 shrink-0">
          <svg class="w-5 h-5 text-squad-300 dark:text-squad-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
        </div>
        <div class="flex-1 relative text-center flex flex-col items-center">
          <div class="inline-flex items-center justify-center w-12 h-12 rounded-2xl bg-squad-600 text-white font-bold text-lg mb-5 shadow-lg shadow-squad-600/25">3</div>
          <h3 class="font-semibold text-surface-900 dark:text-white mb-2">Build</h3>
          <p class="text-sm text-surface-600 dark:text-surface-400 mb-4 flex-1">Talk to your team — they help you build, test, and prepare changes for review.</p>
          <code class="text-sm font-mono bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-green-400 px-3 py-1.5 rounded-lg border border-surface-200 dark:border-transparent">copilot --agent squad</code>
        </div>
      </div>
    </div>
  </section>

  <!-- Explore the Docs -->
  <section class="py-20 sm:py-28 reveal">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center mb-12">
        <p class="text-squad-600 dark:text-squad-400 font-semibold text-sm tracking-wide uppercase mb-3">Documentation</p>
        <h2 class="text-3xl sm:text-4xl font-bold text-surface-900 dark:text-white">Explore the Docs</h2>
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
        <a href={`${base}docs/get-started/installation/`} class="group relative p-6 rounded-2xl bg-white dark:bg-surface-900 border border-surface-200 dark:border-surface-800 hover:border-squad-400 dark:hover:border-squad-600 hover:shadow-lg hover:shadow-squad-500/10 transition-all duration-300 hover:-translate-y-0.5 overflow-hidden">
          <div class="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-squad-400 to-squad-500"></div>
          <div class="text-2xl mb-3">🚀</div>
          <h3 class="font-semibold text-surface-900 dark:text-white mb-1 group-hover:text-squad-600 dark:group-hover:text-squad-400 transition-colors">Get Started</h3>
          <p class="text-sm text-surface-500 dark:text-surface-400">Install and run your first session in 60 seconds</p>
          <svg class="absolute top-7 right-6 w-4 h-4 text-surface-300 dark:text-surface-600 group-hover:text-squad-500 transition-all group-hover:translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
        </a>

        <a href={`${base}docs/features/team-setup/`} class="group relative p-6 rounded-2xl bg-white dark:bg-surface-900 border border-surface-200 dark:border-surface-800 hover:border-accent-400 dark:hover:border-accent-600 hover:shadow-lg hover:shadow-accent-500/10 transition-all duration-300 hover:-translate-y-0.5 overflow-hidden">
          <div class="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-accent-400 to-accent-500"></div>
          <div class="text-2xl mb-3">⚙️</div>
          <h3 class="font-semibold text-surface-900 dark:text-white mb-1 group-hover:text-accent-600 dark:group-hover:text-accent-400 transition-colors">Features</h3>
          <p class="text-sm text-surface-500 dark:text-surface-400">Parallel work, memory, routing, governance, and more</p>
          <svg class="absolute top-7 right-6 w-4 h-4 text-surface-300 dark:text-surface-600 group-hover:text-accent-500 transition-all group-hover:translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
        </a>

        <a href={`${base}docs/reference/cli/`} class="group relative p-6 rounded-2xl bg-white dark:bg-surface-900 border border-surface-200 dark:border-surface-800 hover:border-navy-400 dark:hover:border-navy-500 hover:shadow-lg hover:shadow-navy-500/10 transition-all duration-300 hover:-translate-y-0.5 overflow-hidden">
          <div class="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-navy-500 to-navy-600"></div>
          <div class="text-2xl mb-3">📖</div>
          <h3 class="font-semibold text-surface-900 dark:text-white mb-1 group-hover:text-navy-600 dark:group-hover:text-navy-300 transition-colors">Reference</h3>
          <p class="text-sm text-surface-500 dark:text-surface-400">CLI commands, SDK API, configuration</p>
          <svg class="absolute top-7 right-6 w-4 h-4 text-surface-300 dark:text-surface-600 group-hover:text-navy-500 transition-all group-hover:translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
        </a>

        <a href={`${base}docs/scenarios/existing-repo/`} class="group relative p-6 rounded-2xl bg-white dark:bg-surface-900 border border-surface-200 dark:border-surface-800 hover:border-squad-400 dark:hover:border-squad-600 hover:shadow-lg hover:shadow-squad-500/10 transition-all duration-300 hover:-translate-y-0.5 overflow-hidden">
          <div class="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-squad-500 via-accent-400 to-navy-500"></div>
          <div class="text-2xl mb-3">🗺️</div>
          <h3 class="font-semibold text-surface-900 dark:text-white mb-1 group-hover:text-squad-600 dark:group-hover:text-squad-400 transition-colors">Scenarios</h3>
          <p class="text-sm text-surface-500 dark:text-surface-400">Real-world patterns for your project type</p>
          <svg class="absolute top-7 right-6 w-4 h-4 text-surface-300 dark:text-surface-600 group-hover:text-squad-500 transition-all group-hover:translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
        </a>
      </div>
    </div>
  </section>

  <!-- Final CTA -->
  <section class="relative py-24 sm:py-32 overflow-hidden reveal">
    <div class="absolute inset-0 bg-gradient-to-br from-navy-800 via-navy-900 to-navy-950"></div>
    <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(240,79,127,0.15),transparent_70%)]"></div>
    <div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.04)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.04)_1px,transparent_1px)] bg-[size:40px_40px]"></div>
    <div class="relative max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-6">Ship faster with<br />a human-led AI team</h2>
      <p class="text-lg text-navy-200/80 mb-10 max-w-xl mx-auto">One install. One command. Keep people accountable while Squad handles the repetitive coordination.</p>
      <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
        <a
          href={`${base}docs/get-started/installation/`}
          class="group w-full sm:w-auto inline-flex items-center justify-center gap-2 px-8 py-4 rounded-xl bg-squad-500 hover:bg-squad-400 text-white font-semibold transition-all hover:-translate-y-0.5 shadow-lg shadow-squad-500/25"
        >
          Get Started — It's Free
          <svg class="w-4 h-4 transition-transform group-hover:translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
          </svg>
        </a>
        <a
          href={`${base}blog/`}
          class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-8 py-4 rounded-xl border border-white/25 text-white font-semibold transition-all hover:bg-white/10 hover:-translate-y-0.5"
        >
          Read the Blog
        </a>
      </div>
    </div>
  </section>

  <Footer />
</BaseLayout>

<script>
  const copyBtn = document.getElementById('copy-install');
  copyBtn?.addEventListener('click', async () => {
    await navigator.clipboard.writeText('npm i -g @bradygaster/squad-cli');
    const svg = copyBtn.innerHTML;
    copyBtn.innerHTML = '<svg class="w-4 h-4 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>';
    setTimeout(() => { copyBtn.innerHTML = svg; }, 2000);
  });

  // Scroll reveal
  const revealObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('visible');
        revealObserver.unobserve(entry.target);
      }
    });
  }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
  document.querySelectorAll('.reveal').forEach(el => revealObserver.observe(el));
</script>
