---
// Documentation Page
import MainLayout from '../layouts/MainLayout.astro';
---

<MainLayout>
  <nav class="container">
    <div class="logo">AETHEX</div>
    <div class="nav-links">
      <a href="/foundation" class="nav-link">Foundation</a>
      <a href="/corporation" class="nav-link">Corporation</a>
      <a href="/labs" class="nav-link">Labs</a>
      <a href="/products" class="nav-link">Products</a>
      <a href="/community" class="nav-link">Community</a>
      <a href="/docs" class="nav-link">Docs</a>
      <a href="/about" class="nav-link">About</a>
    </div>
  </nav>
  <main class="page docs">
    <section class="hero-banner">
      <div class="hero-bg"></div>
      <div class="hero-content">
        <h1 class="page-title animated">
          <span class="fade-in">Documentation</span>
        </h1>
        <p class="page-desc fade-in-delay">Guides, APIs & Technical References</p>
      </div>
    </section>
    <div class="glass-card">
      <section class="fade-in-section">
        <h2>Developer Resources</h2>
        <p>Everything you need to build with AeThex infrastructure.</p>
        <ul>
          <li>Getting Started Guide</li>
          <li>API Reference</li>
          <li>SDK Documentation</li>
          <li>Tutorials & Examples</li>
          <li>Best Practices</li>
        </ul>
      </section>
    </div>
    <footer class="page-footer">
      <span>© AeThex 2026</span>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </footer>
    <style>
      .fade-in-section { opacity: 0; transform: translateY(32px); animation: fadeInSection 1.2s 0.5s cubic-bezier(.77,0,.175,1) forwards; }
      @keyframes fadeInSection { to { opacity: 1; transform: none; } }
      .page.docs { background: linear-gradient(120deg, #0a0a0a 55%, #3399ff 80%, #66ccff 100%); min-height: 100vh; font-family: 'Inter', 'Segoe UI', Arial, sans-serif; }
      .nav-link { color: #fff; margin: 0 12px; text-decoration: none; font-weight: 600; transition: color 0.2s, text-shadow 0.2s; }
      .nav-link:hover { color: #66ccff; text-shadow: 0 0 8px #66ccff; }
      .hero-banner { position: relative; height: 340px; display: flex; align-items: center; justify-content: center; margin-bottom: 32px; }
      .hero-bg { position: absolute; inset: 0; background: radial-gradient(circle at 60% 40%, #3399ff 0%, #0a0a0a 80%); opacity: 0.7; z-index: 1; }
      .hero-content { position: relative; z-index: 2; text-align: center; }
      .page-title { font-size: 3em; font-weight: 900; margin-bottom: 12px; letter-spacing: 2px; color: #fff; }
      .page-title.animated .fade-in { animation: fadeInDown 1s cubic-bezier(.77,0,.175,1) both; display: inline-block; }
      .page-desc.fade-in-delay { animation: fadeInUp 1.2s cubic-bezier(.77,0,.175,1) both; display: block; }
      @keyframes fadeInDown { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: translateY(0); } }
      @keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
      .page-desc { font-size: 1.2em; margin-bottom: 24px; color: #fff; }
      .glass-card { background: rgba(255,255,255,0.10); border-radius: 28px; box-shadow: 0 4px 32px #3399ff80; backdrop-filter: blur(16px); margin: 40px auto; max-width: 650px; padding: 40px 36px; color: #fff; border: 2px solid #3399ff; }
      ul { color: #fff; margin-top: 24px; padding-left: 24px; }
      ul li { margin-bottom: 14px; transition: color 0.2s, transform 0.2s; cursor: pointer; font-size: 1.08em; }
      ul li:hover { color: #66ccff; transform: scale(1.05); }
      .page-footer { text-align: center; margin-top: 48px; color: #fff; font-size: 1em; opacity: 0.7; }
      .page-footer a { color: #66ccff; margin-left: 16px; text-decoration: underline; }

      @media (max-width: 768px) {
        .hero-banner { height: auto; min-height: 280px; padding: 40px 20px; }
        .page-title { font-size: 2em; }
        .page-desc { font-size: 1em; }
        .glass-card { margin: 24px 16px; padding: 28px 20px; }
        ul li { font-size: 1em; }
      }
    </style>
  </main>
</MainLayout>