---
import Layout from '@/layouts/Layout.astro';
import GlassHeader from '@/components/GlassHeader';
import Footer from '@/components/Footer';
import Container from '@/components/ui/Container.astro';
import { projects } 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 pageProjects = projects[lang].map((project) => ({
  ...project,
  category: project.id === 'elynd' || project.id === 'linky' ? 'indie' : 'enterprise',
}));
const enterpriseProjects = pageProjects.filter((project) => project.category === 'enterprise');
const indieProjects = pageProjects.filter((project) => project.category === 'indie');
---

<Layout title={isZh ? '项目' : 'Projects'}>
  <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">{isZh ? '项目经历' : 'Project Experience'}</h1>
        <p class="mt-4 text-lg leading-relaxed text-muted-foreground">
          {isZh
            ? '按两类展示：企业项目与独立开发项目。采用卡片布局，聚焦项目背景、职责和结果。'
            : 'Organized into two categories: enterprise projects and independent projects, shown in a cover-style card grid.'}
        </p>
      </section>

      <section class="page-content-main mt-8">
        <div class="mb-5 flex items-end justify-between gap-3">
          <h2 class="text-2xl font-bold tracking-tight">{isZh ? '企业项目' : 'Enterprise Projects'}</h2>
          <span class="text-sm text-muted-foreground">{enterpriseProjects.length} {isZh ? '个项目' : 'projects'}</span>
        </div>
        <div class="grid gap-5 sm:grid-cols-2 xl:grid-cols-3">
          {enterpriseProjects.map((project) => (
            <article class="page-surface overflow-hidden">
              <div class={`bg-gradient-to-br ${project.image.bg} p-5`}>
                <p class="text-xs font-semibold uppercase tracking-wider text-foreground/80">{isZh ? '企业项目' : 'Enterprise'}</p>
                <h3 class="mt-2 text-lg font-bold">{project.title}</h3>
                <p class="mt-2 text-sm text-foreground/80">{project.systemType}</p>
              </div>
              <div class="p-5">
                <p class="text-sm text-muted-foreground">{project.context}</p>
                <div class="mt-4 flex flex-wrap gap-2">
                  {project.tech.slice(0, 5).map((tech) => (
                    <span class="rounded-md border border-border bg-muted/50 px-2.5 py-1 text-xs font-medium">{tech}</span>
                  ))}
                </div>
                <p class="mt-4 text-sm font-semibold text-foreground/90">{isZh ? '结果：' : 'Outcome:'} {project.outcomes?.[0] ?? project.impact}</p>
                <p class="mt-3 text-xs text-muted-foreground">{isZh ? '受保密协议限制，暂不提供在线预览。' : 'Online preview is not available due to confidentiality restrictions.'}</p>
              </div>
            </article>
          ))}
        </div>
      </section>

      <section class="page-content-main mt-12">
        <div class="mb-5 flex items-end justify-between gap-3">
          <h2 class="text-2xl font-bold tracking-tight">{isZh ? '独立项目' : 'Independent Projects'}</h2>
          <span class="text-sm text-muted-foreground">{indieProjects.length} {isZh ? '个项目' : 'projects'}</span>
        </div>
        <div class="grid gap-5 sm:grid-cols-2 xl:grid-cols-3">
          {indieProjects.map((project) => (
            <article class="page-surface h-full overflow-hidden flex flex-col">
              <div class="relative aspect-[16/9] overflow-hidden border-b border-border/70 bg-muted/30">
                {project.coverImage ? (
                  <img
                    src={project.coverImage}
                    alt={project.coverImageAlt || project.title}
                    class="h-full w-full object-cover transition-transform duration-300 ease-out hover:scale-105"
                    loading="lazy"
                    decoding="async"
                  />
                ) : (
                  <div class={`flex h-full w-full flex-col justify-end bg-gradient-to-br ${project.image.bg} p-5`}>
                    <p class="text-xs font-semibold uppercase tracking-wider text-foreground/80">{isZh ? '封面待补充' : 'Cover Coming Soon'}</p>
                    <h3 class="mt-2 text-lg font-bold">{project.title}</h3>
                    <p class="mt-1 text-sm text-foreground/80">{project.systemType}</p>
                  </div>
                )}
                {/* Status Badge */}
                <div class="absolute right-3 top-3">
                  <span
                    class={`inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium ${
                      project.status === 'completed'
                        ? 'bg-emerald-500/20 text-emerald-600 dark:text-emerald-400 border border-emerald-500/30'
                        : 'bg-amber-500/20 text-amber-600 dark:text-amber-400 border border-amber-500/30'
                    }`}
                  >
                    {project.status === 'completed' ? (isZh ? '已完成' : 'Completed') : (isZh ? '开发中' : 'In Progress')}
                  </span>
                </div>
              </div>
              <div class="flex flex-1 flex-col p-5">
                <div class="flex flex-1 flex-col pb-4">
                  <h3 class="text-lg font-bold">{project.title}</h3>
                  {project.context && <p class="mt-2 text-sm text-muted-foreground">{project.context}</p>}
                  <div class="mt-4 flex flex-wrap gap-2">
                    {project.tech.slice(0, 5).map((tech) => (
                      <span class="rounded-md border border-border bg-muted/50 px-2.5 py-1 text-xs font-medium">{tech}</span>
                    ))}
                  </div>
                </div>
                {/* Action Buttons */}
                <div class="mt-auto flex gap-3 border-t border-border/50 pt-5">
                  {project.links?.demo && (
                    <a
                      href={project.links.demo}
                      target="_blank"
                      rel="noopener noreferrer"
                      class="inline-flex items-center gap-1.5 rounded-md bg-primary px-3.5 py-2 text-sm font-medium text-primary-foreground shadow-sm transition-colors hover:bg-primary/90"
                    >
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4">
                        <path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.139 2.5 2.5 0 0 1-.142-3.635l3-3Z" />
                        <path d="M11.603 7.963a.75.75 0 0 0-.977 1.139 2.5 2.5 0 0 1 .142 3.635l-3 3a4 4 0 0 0 5.656 5.656l1.224-1.224a.75.75 0 0 0-1.06-1.06l-1.224 1.224a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0-.225 5.865Z" />
                      </svg>
                      {isZh ? '预览' : 'Preview'}
                    </a>
                  )}
                  {project.links?.github && (
                    <a
                      href={project.links.github}
                      target="_blank"
                      rel="noopener noreferrer"
                      class="inline-flex items-center gap-1.5 rounded-md border border-border bg-background px-3.5 py-2 text-sm font-medium shadow-sm transition-colors hover:bg-muted"
                    >
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-4 w-4">
                        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
                      </svg>
                      GitHub
                    </a>
                  )}
                </div>
              </div>
            </article>
          ))}
        </div>
      </section>
    </Container>
  </main>

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