---
import BaseLayout from '../layouts/BaseLayout.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import NavigationGrid from '../components/navigation/NavigationGrid.astro';
import NavigationCard from '../components/navigation/NavigationCard.astro';
import Container from '../components/Container.astro';
---

<BaseLayout title="Jiao77 - 首页" description="简约美观的现代化网站" type="navigation">
  <Header />
  
  <main class="main-content">
    <div class="container mx-auto px-4">
      <Container
        variant="glass"
        size="large"
        padding="xl"
        className="text-center mb-12"
        revealDistance="48px"
      >
        <h1 class="hero-title"><i class="fas fa-rocket"></i> 焦七七小站</h1>
        <p class="hero-subtitle">技术服务平台</p>
        <p class="hero-description">整合多种自建服务，提供便捷的技术解决方案。从这里发现更多可能性！</p>
      </Container>
    </div>
    
    <NavigationGrid 
      title="技术服务"
      description="整合多种自建服务，提供便捷的技术解决方案"
      columns={3}
      gap="large"
    >
      <NavigationCard
        title="AList 网盘"
        description="整合多平台云存储的统一管理工具，方便快捷地访问您的各种网盘和存储服务。"
        href="http://jiao77.cn:52443"
        icon="fas fa-cloud"
        color="primary"
        size="large"
      />
      
      <NavigationCard
        title="Q-Nas"
        description="基于飞牛系统的nas服务。"
        href="http://jiao77.cn:5666"
        icon="fas fa-server"
        color="secondary"
        size="large"
      />
      
      <NavigationCard
        title="nuc-Nas"
        description="另外一个飞牛nas。"
        href="http://jiao77.cn:56661"
        icon="fas fa-database"
        color="accent"
        size="large"
      />
      
      <NavigationCard
        title="RAGflow 知识库"
        description="基于检索增强生成的知识管理系统，快速获取和整理专业领域知识。"
        href="http://jiao77.cn:28081"
        icon="fas fa-robot"
        color="primary"
        size="medium"
      />
      
      <NavigationCard
        title="Open WebUI"
        description="强大的AI交互界面，提供直观的模型管理和交互体验。"
        href="http://jiao77.cn:38080"
        icon="fas fa-brain"
        color="secondary"
        size="medium"
      />
      
      <NavigationCard
        title="Navidrome 音乐"
        description="您自己的个人音乐服务器，随时随地享受您的音乐收藏。"
        href="http://jiao77.cn:45332"
        icon="fas fa-music"
        color="primary"
        size="medium"
      />
      
      <NavigationCard
        title="Gitea"
        description="轻量级的代码托管解决方案，用于版本控制和协作开发。"
        href="http://jiao77.cn:3012"
        icon="fas fa-code-branch"
        color="secondary"
        size="medium"
      />
      
      <NavigationCard
        title="技术报告"
        description="这是一个我做过的技术报告的导航。"
        href="http://jiao77.cn/report"
        icon="fas fa-file-alt"
        color="accent"
        size="medium"
      />
    </NavigationGrid>
  </main>
  
  <Footer />
</BaseLayout>

<style>
  .main-content {
    min-height: 100vh;
    padding-top: 6rem;
    padding-bottom: 2rem;
  }
  
  .container {
    max-width: 1200px;
    width: 100%;
  }
  
  .mx-auto {
    margin-left: auto;
    margin-right: auto;
  }
  
  .px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .hero-title {
    font-size: 3rem;
    font-weight: 800;
    color: #011a2d;
    margin: 0 0 1rem 0;
    background: linear-gradient(135deg, #011a2d, #2c4a6b, #5b778e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  .hero-subtitle {
    font-size: 1.5rem;
    color: #011a2d;
    margin: 0 0 1rem 0;
    font-weight: 600;
  }
  
  .hero-description {
    font-size: 1rem;
    color: #2c4a6b;
    margin: 0;
    font-weight: 300;
    line-height: 1.6;
  }
  
  @media (max-width: 768px) {
    .hero-title {
      font-size: 2.25rem;
    }
    
    .hero-subtitle {
      font-size: 1.1rem;
    }
    
    .main-content {
      padding-top: 5rem;
    }
  }
</style>