---
import Base from '../../layouts/Base.astro';
import Nav from '../../components/Nav.astro';
import Footer from '../../components/Footer.astro';
import YouTubeChannel from '../../components/YouTubeChannel.astro';
import { getGuideSections } from '../../data/docsNav';

const sections = getGuideSections();
---

<Base
  title="Guides - Agent of Empires"
  description="Step-by-step guides for Agent of Empires: sandboxing, git worktrees, the web dashboard, and more."
>
  <Nav />
  <main class="max-w-6xl mx-auto px-6 pt-32 pb-24">
    <span class="font-mono text-xs uppercase tracking-widest text-brand-600">Guides</span>
    <h1 class="text-4xl md:text-5xl font-bold text-white mb-6 mt-3 font-display">Guides</h1>
    <p class="text-lg text-gray-100 leading-relaxed mb-16 max-w-2xl">
      Practical, task-focused walkthroughs for getting the most out of aoe. Start anywhere, or
      head to the <a href="/docs/quick-start/" class="text-brand-500 hover:text-brand-400 transition-colors">Quick Start</a>
      if you're brand new.
    </p>

    {sections.map((section) => (
      <section class="mb-16">
        <h2 class="text-2xl font-semibold text-white mb-6 font-display">{section.title}</h2>
        <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
          {section.items.map((guide) => (
            <a href={guide.href} class="feature-card rounded-xl p-5 group">
              <span class="text-white font-medium group-hover:text-brand-400 transition-colors">{guide.title}</span>
              {guide.description && (
                <p class="text-gray-400 text-sm mt-1.5 leading-relaxed">{guide.description}</p>
              )}
            </a>
          ))}
        </div>
      </section>
    ))}

    <section class="mb-12">
      <span class="font-mono text-xs uppercase tracking-widest text-brand-600">Learn</span>
      <h2 class="text-2xl font-semibold text-white mb-4 mt-3 font-display">Video tutorials</h2>
      <p class="text-gray-400 leading-relaxed mb-6 max-w-xl">
        Prefer watching? Our YouTube channel has walkthroughs, setup guides, and tips.
      </p>
      <YouTubeChannel class="max-w-2xl" />
    </section>

    <p class="text-gray-400 leading-relaxed">
      Have a guide you'd like to see? <a href="https://github.com/agent-of-empires/agent-of-empires/issues" target="_blank" rel="noopener" class="text-brand-500 hover:text-brand-400 transition-colors">Open a GitHub issue</a> and let us know.
    </p>
  </main>
  <Footer />
</Base>
