---
import Layout from '@/layouts/Layout.astro';
import GlassHeader from '@/components/GlassHeader';
import Footer from '@/components/Footer';
import Container from '@/components/ui/Container.astro';
import { personalInfo, uses, contactMethods } from '@/lib/data';
import type { Lang } from '@/types/i18n';
import { defaultLang } from '@/i18n/ui';

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

const focusAreas = isZh
  ? ['前端架构设计与模块治理', '大型企业应用工程化交付', '金融与区块链系统前端建设', 'AI 协作开发流程实践']
  : ['Frontend architecture and module governance', 'Large-scale enterprise application delivery', 'Financial and blockchain system engineering', 'AI-assisted development workflow practices'];

const experienceNotes = isZh
  ? [
      '8 年专业开发经验，持续参与复杂业务系统建设。',
      '参与多个政府与金融科技相关系统，包括交易平台、区块链基础设施、产业管理系统。',
      '擅长跨角色协作与远程异步沟通，注重稳定交付与长期可维护性。',
    ]
  : [
      '8 years of professional development experience across complex business systems.',
      'Contributed to government- and fintech-related systems, including trading platforms, blockchain infrastructure, and industrial management systems.',
      'Strong in cross-functional collaboration and remote async execution with long-term maintainability in mind.',
    ];

const workStyle = isZh
  ? ['远程优先、异步协作为主，关键节点同步决策', '强调可维护架构与稳定交付节奏', '文档化需求与边界，降低沟通与返工成本']
  : ['Remote-first and async-friendly collaboration with sync checkpoints', 'Maintainable architecture and stable delivery cadence', 'Documented requirements and boundaries to reduce rework'];
---

<Layout title={isZh ? '关于' : 'About'}>
  <GlassHeader lang={lang} client:load transition:persist="header" />

  <main class="min-h-screen pt-24 pb-20">
    <Container>
      <section class="page-content-main" id="overview">
        <div class="mb-6 flex flex-wrap gap-2 text-sm">
          <a href="#overview" class="rounded-md border border-border px-3 py-1 hover:bg-muted">{isZh ? '概览' : 'Overview'}</a>
          <a href="#experience" class="rounded-md border border-border px-3 py-1 hover:bg-muted">{isZh ? '经验' : 'Experience'}</a>
          <a href="#focus" class="rounded-md border border-border px-3 py-1 hover:bg-muted">{isZh ? '技术焦点' : 'Focus'}</a>
          <a href="#uses" class="rounded-md border border-border px-3 py-1 hover:bg-muted">Uses</a>
          <a href="#contact-brief" class="rounded-md border border-border px-3 py-1 hover:bg-muted">{isZh ? '联系' : 'Contact'}</a>
        </div>

        <h1 class="text-4xl font-bold tracking-tight sm:text-5xl">{isZh ? '关于我' : 'About'}</h1>
        <p class="mt-6 text-lg leading-relaxed text-muted-foreground">{personalInfo.description[lang]}</p>
      </section>

      <section class="page-content-main mt-10 page-surface p-8" id="experience">
        <h2 class="text-2xl font-bold tracking-tight">{isZh ? '经验概览' : 'Experience'}</h2>
        <div class="mt-4 space-y-4 text-muted-foreground">
          {personalInfo.about[lang].map((line) => <p>{line}</p>)}
        </div>
        <ul class="mt-5 space-y-3 text-muted-foreground">
          {experienceNotes.map((item) => (
            <li class="flex gap-3"><span class="mt-2 h-1.5 w-1.5 rounded-full bg-primary"></span><span>{item}</span></li>
          ))}
        </ul>
      </section>

      <section class="page-content-main mt-6 page-surface p-8" id="focus">
        <h2 class="text-2xl font-bold tracking-tight">{isZh ? '技术焦点' : 'Technical Focus'}</h2>
        <ul class="mt-4 grid gap-3 md:grid-cols-2 text-muted-foreground">
          {focusAreas.map((item) => (
            <li class="flex gap-3 rounded-md border border-border/70 p-3"><span class="mt-2 h-1.5 w-1.5 rounded-full bg-primary"></span><span>{item}</span></li>
          ))}
        </ul>
      </section>

      <section class="page-content-main mt-6 page-surface p-8" id="uses">
        <h2 class="text-2xl font-bold tracking-tight">{isZh ? '工具与工作流' : 'Uses'}</h2>
        <div class="mt-5 grid gap-5 md:grid-cols-2">
          {uses.map((group) => (
            <article class="rounded-md border border-border/70 p-5">
              <h3 class="text-base font-bold">{group.title[lang]}</h3>
              <ul class="mt-3 space-y-1.5 text-sm text-muted-foreground">
                {group.items.map((item) => <li>• {item}</li>)}
              </ul>
            </article>
          ))}
        </div>
      </section>

      <section class="page-content-main mt-6 page-surface p-8" id="work-style">
        <h2 class="text-2xl font-bold tracking-tight">{isZh ? '工作方式' : 'Work Style'}</h2>
        <ul class="mt-4 space-y-3 text-muted-foreground">
          {workStyle.map((item) => (
            <li class="flex gap-3"><span class="mt-2 h-1.5 w-1.5 rounded-full bg-primary"></span><span>{item}</span></li>
          ))}
        </ul>
      </section>

      <section class="page-content-main mt-6 page-surface p-8" id="contact-brief">
        <h2 class="text-2xl font-bold tracking-tight">{isZh ? '联系（简版）' : 'Contact Brief'}</h2>
        <p class="mt-3 text-muted-foreground">{isZh ? '优先沟通远程岗位机会，其次为项目合作咨询。' : 'Remote role opportunities are prioritized, followed by project collaboration.'}</p>

        <ul class="mt-5 space-y-3 text-sm">
          {contactMethods.map((method) => (
            <li class="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between border-b border-border/70 pb-3">
              <span class="font-semibold text-foreground">{method.label[lang]}</span>
              {method.href ? (
                <a href={method.href} target="_blank" rel="noopener noreferrer" class="text-primary hover:text-primary/80 break-all">{method.value}</a>
              ) : (
                <span class="text-muted-foreground break-all">{method.value}</span>
              )}
            </li>
          ))}
        </ul>

        <div class="mt-6 flex flex-wrap gap-3">
          <a href={`${prefix}/contact`} class="inline-flex h-10 items-center rounded-lg bg-primary px-5 text-sm font-semibold text-primary-foreground">{isZh ? '进入完整联系页' : 'Open Full Contact Page'}</a>
          <a href={`${prefix}/contact#project-collaboration`} class="inline-flex h-10 items-center rounded-lg border border-border px-5 text-sm font-semibold hover:bg-muted">{isZh ? '项目合作入口' : 'Project Collaboration'}</a>
        </div>

        <div class="mt-5 border-t border-border/70 pt-4 text-sm">
          <p class="font-semibold text-foreground">GitHub</p>
          <a href={personalInfo.github} target="_blank" rel="noopener noreferrer" class="text-primary hover:text-primary/80 break-all">{personalInfo.github}</a>
        </div>
      </section>
    </Container>
  </main>

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