---
import Layout from "@/layouts/Layout.astro";
import GlassHeader from "@/components/GlassHeader";
import Footer from "@/components/Footer";
import Container from "@/components/ui/Container.astro";
import { useTranslations } from "@/i18n/utils";
import type { Lang } from "@/types/i18n";
import { defaultLang } from "@/i18n/ui";

const lang = Astro.currentLocale as Lang || defaultLang;
const t = useTranslations(lang);
const pageTitle = lang === 'zh' ? '现在' : 'Now';
---

<Layout title={pageTitle}>
  <GlassHeader lang={lang} client:only="react" />
  <main class="min-h-screen">
    <!-- Now Page Hero -->
    <section class="py-24 relative overflow-hidden">
      <div class="page-hero-overlay"></div>

      <Container className="relative z-10">
        <div class="text-center mb-16">
          <span class="inline-block px-4 py-1 bg-primary/20 text-primary dark:text-primary rounded-full text-sm font-medium mb-4">
            关于我现在正在做什么
          </span>
          <h1 class="page-title-gradient text-5xl md:text-6xl font-bold mb-6">
            现在
          </h1>
          <p class="text-lg text-muted-foreground page-content-narrow">
            持续更新我的现状、正在构建的内容以及合作机会
          </p>
        </div>
      </Container>
    </section>

    <!-- Building Section -->
    <section class="py-16 relative">
      <Container>
        <div class="page-content-main">
          <div class="flex items-center gap-4 mb-8">
            <div class="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center">
              <span class="text-2xl">🔨</span>
            </div>
            <h2 class="text-3xl font-bold">
              正在构建
            </h2>
          </div>

          <div class="page-surface p-8">
            <div class="flex items-start gap-6">
              <div class="w-16 h-16 bg-gradient-to-br from-primary to-blue-600 rounded-xl flex items-center justify-center flex-shrink-0">
                <span class="text-3xl">⚡</span>
              </div>
              <div class="flex-1">
                <h3 class="text-xl font-bold mb-2">Elynd</h3>
                <p class="text-muted-foreground mb-4">
                  一个开放的 AI 工作空间，让构建者能够更智能地工作。从 AI 第一性原理出发，打造完全开放、可自托管的协作工具。
                </p>
                <div class="flex flex-wrap gap-2">
                  <span class="px-3 py-1 bg-primary/20 text-primary dark:text-primary rounded-full text-sm">AI 产品</span>
                  <span class="px-3 py-1 bg-blue-500/20 text-blue-600 dark:text-blue-400 rounded-full text-sm">TypeScript</span>
                  <span class="px-3 py-1 bg-green-500/20 text-green-600 dark:text-green-400 rounded-full text-sm">开源</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Container>
    </section>

    <!-- Exploring Section -->
    <section class="py-16 relative page-section-soft">
      <Container>
        <div class="page-content-main">
          <div class="flex items-center gap-4 mb-8">
            <div class="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center">
              <span class="text-2xl">🔭</span>
            </div>
            <h2 class="text-3xl font-bold">
              正在探索
            </h2>
          </div>

          <div class="grid gap-6">
            <div class="page-surface p-6">
              <h3 class="text-lg font-bold mb-3">
                AI Agents 与工作流自动化
              </h3>
              <p class="text-muted-foreground">
                研究如何构建能够自主完成复杂任务的 AI Agent，以及如何将 AI 能力融入日常工作流。
              </p>
            </div>

            <div class="page-surface p-6">
              <h3 class="text-lg font-bold mb-3">
                产品导向的开发实践
              </h3>
              <p class="text-muted-foreground">
                探索从产品角度思考开发，构建真正解决用户问题的产品，而不仅仅是技术实现。
              </p>
            </div>
          </div>
        </div>
      </Container>
    </section>

    <!-- Shipping Section -->
    <section class="py-16 relative">
      <Container>
        <div class="page-content-main">
          <div class="flex items-center gap-4 mb-8">
            <div class="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center">
              <span class="text-2xl">🚀</span>
            </div>
            <h2 class="text-3xl font-bold">
              最近发布
            </h2>
          </div>

          <div class="space-y-4">
            <div class="page-surface rounded-xl p-6 flex items-center gap-4">
              <div class="w-12 h-12 bg-green-500/20 rounded-lg flex items-center justify-center flex-shrink-0">
                <span class="text-xl">✨</span>
              </div>
              <div>
                <h3 class="font-bold mb-1">
                  个人网站全新改版
                </h3>
                <p class="text-sm text-muted-foreground">
                  全新设计的个人网站，突出 AI 产品构建者的定位
                </p>
              </div>
            </div>
          </div>
        </div>
      </Container>
    </section>

    <!-- Open to Collaborate Section -->
    <section class="py-16 relative bg-gradient-to-br from-blue-900/10 to-blue-900/10 dark:from-blue-900/20 dark:to-blue-900/20">
      <Container>
        <div class="page-content-main text-center">
          <div class="flex items-center justify-center gap-4 mb-8">
            <div class="w-12 h-12 bg-yellow-500/20 rounded-xl flex items-center justify-center">
              <span class="text-2xl">🤝</span>
            </div>
            <h2 class="text-3xl font-bold">
              开放合作
            </h2>
          </div>

          <div class="page-surface p-8">
            <p class="text-lg text-muted-foreground mb-8">
              我始终对新的合作机会持开放态度。无论你是想要构建产品、寻找技术合伙人，还是需要技术咨询，都可以联系我。
            </p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
              <a
                href="/zh/hire"
                class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg font-semibold transition-colors inline-flex items-center justify-center gap-2"
              >
                <span>💼</span>
                查看合作方式
              </a>
              <a
                href="mailto:zhaoguiyang18@gmail.com"
                class="border border-primary text-primary hover:bg-primary hover:text-white px-6 py-3 rounded-lg font-semibold transition-colors inline-flex items-center justify-center gap-2"
              >
                <span>📧</span>
                发送邮件
              </a>
            </div>
          </div>
        </div>
      </Container>
    </section>

    <!-- Last Updated -->
    <section class="py-12">
      <Container>
        <div class="page-content-main text-center">
          <p class="text-sm text-muted-foreground">
            最后更新：
            <span class="font-medium">2025年3月</span>
          </p>
        </div>
      </Container>
    </section>
  </main>
  <Footer lang={lang} client:only="react" />
</Layout>