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

const lang = (Astro.currentLocale as Lang) || defaultLang;
const isZh = lang === 'zh';

const focuses = [
  {
    title: '云端书签工具',
    status: '已上线',
    desc: '面向开发者与信息工作者的轻量级自部署工具，数据完全可控。支持 AI 自动标签、内容识别与语义搜索。',
  },
  {
    title: 'ELYND 英语学习工具',
    status: '即将上线',
    desc: '基于阅读场景的英语学习产品，提供电子书与同步音频。支持点击单词/句子即时解释，AI 对话辅助理解。',
  },
];

const problems = [
  {
    title: '英语学习中的「理解断点」问题',
    desc: '背单词脱离语境、阅读原文有障碍、遇到问题缺乏即时反馈——想解决学习过程中的理解断裂。',
  },
  {
    title: 'AI 能力的产品化落地',
    desc: '不只是 Demo 层面的展示，而是在真实产品中接入 AI 标签、文本处理、对话能力。',
  },
  {
    title: '工具型 AI 产品的用户体验',
    desc: '如何在保持工具简洁性的同时，融入 AI 能力而不造成负担。',
  },
];

const outputs = [
  '云端书签工具 v1.0 上线',
  'ELYND 即将发布',
];

const availability = {
  jobs: '远程 / 全栈 / AI 方向',
  projects: '外包 / 分包 / 独立项目开发',
  preferences: '工具类产品 / AI 能力接入 / Web 应用',
};

const today = new Date().toISOString().split('T')[0];
---

<Layout title="现在">
  <GlassHeader lang={lang} client:load transition:persist="header" />

  <main id="main-content" class="min-h-screen pt-24 pb-20">
    <Container>
      <section class="page-content-main">
        <h1 class="text-4xl font-bold tracking-tight sm:text-5xl">现在</h1>
        <p class="mt-4 text-lg text-muted-foreground">我当前的工作状态与产出。</p>
      </section>

      <!-- 当前主线 -->
      <section class="page-content-main mt-10">
        <h2 class="text-xl font-bold">当前主线</h2>
        <div class="mt-4 space-y-4">
          {focuses.map((item) => (
            <article class="page-surface p-5">
              <div class="flex items-center gap-3">
                <h3 class="text-base font-bold">{item.title}</h3>
                <span class="rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-medium text-primary">{item.status}</span>
              </div>
              <p class="mt-2 text-sm text-muted-foreground">{item.desc}</p>
            </article>
          ))}
        </div>
      </section>

      <!-- 当前关注的问题 -->
      <section class="page-content-main mt-8">
        <h2 class="text-xl font-bold">当前关注的问题</h2>
        <div class="mt-4 space-y-3">
          {problems.map((item) => (
            <article class="rounded-lg border border-border/70 p-4">
              <h3 class="text-sm font-semibold">{item.title}</h3>
              <p class="mt-1.5 text-sm text-muted-foreground">{item.desc}</p>
            </article>
          ))}
        </div>
      </section>

      <!-- 近期产出 -->
      <section class="page-content-main mt-8">
        <h2 class="text-xl font-bold">近期产出</h2>
        <ul class="mt-4 space-y-2">
          {outputs.map((item) => (
            <li class="flex items-center gap-2 text-sm">
              <span class="h-1.5 w-1.5 rounded-full bg-accent"></span>
              {item}
            </li>
          ))}
        </ul>
      </section>

      <!-- 当前状态 -->
      <section class="page-content-main mt-8 page-surface p-5">
        <h2 class="text-xl font-bold">当前状态</h2>
        <div class="mt-4 grid gap-3 text-sm md:grid-cols-3">
          <div>
            <span class="font-medium">求职：</span>
            <span class="text-muted-foreground">{availability.jobs}</span>
          </div>
          <div>
            <span class="font-medium">接单：</span>
            <span class="text-muted-foreground">{availability.projects}</span>
          </div>
          <div>
            <span class="font-medium">偏好：</span>
            <span class="text-muted-foreground">{availability.preferences}</span>
          </div>
        </div>
      </section>

      <section class="page-content-main mt-8 page-surface p-4">
        <p class="text-sm text-muted-foreground">
          最后更新：{today}
        </p>
      </section>
    </Container>
  </main>

  <Footer lang={lang} client:load />
</Layout>
