---
import Layout from '@/layouts/Layout.astro';
import GlassHeader from '@/components/GlassHeader';
import Footer from '@/components/Footer';
import Container from '@/components/ui/Container.astro';
import ContactCard from '@/components/ContactCard.astro';
import {
  collaborationModels,
  collaborationFitSignals,
  collaborationProcess,
  collaborationFaq,
} 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';
---

<Layout title={isZh ? '合作' : 'Hire'}>
  <GlassHeader lang={lang} client:load transition:persist="header" />

  <main 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 ? '合作方式' : 'Work With Me'}</h1>
        <p class="mt-4 text-lg leading-relaxed text-muted-foreground">
          {isZh
            ? '这个页面只做一件事：帮助你快速判断我们是否匹配。'
            : 'This page does one thing: help you quickly evaluate whether we are a good fit.'}
        </p>
      </section>

      <section class="page-content-main mt-10">
        <h2 class="text-2xl font-bold tracking-tight">{isZh ? '合作模型' : 'Collaboration Models'}</h2>
        <div class="mt-4 grid gap-4 md:grid-cols-3">
          {collaborationModels.map((model) => (
            <article class="page-surface p-5">
              <h3 class="text-lg font-bold">{model.title[lang]}</h3>
              <p class="mt-2 text-sm text-muted-foreground">{model.description[lang]}</p>
            </article>
          ))}
        </div>
      </section>

      <section class="page-content-main mt-6 grid gap-6 md:grid-cols-2">
        <article class="page-surface p-6">
          <h2 class="text-xl font-bold">{isZh ? '匹配信号' : 'Good Fit Signals'}</h2>
          <ul class="mt-4 space-y-2 text-sm text-muted-foreground">
            {collaborationFitSignals.map((item) => <li>• {item[lang]}</li>)}
          </ul>
        </article>

        <article class="page-surface p-6">
          <h2 class="text-xl font-bold">{isZh ? '合作流程' : 'Collaboration Process'}</h2>
          <ol class="mt-4 space-y-2 text-sm text-muted-foreground list-decimal pl-5">
            {collaborationProcess.map((item) => <li>{item[lang]}</li>)}
          </ol>
        </article>
      </section>

      <section class="page-content-main mt-6 page-surface p-6">
        <h2 class="text-xl font-bold">{isZh ? '默认协作约定' : 'Default Working Agreement'}</h2>
        <ul class="mt-4 space-y-2 text-sm text-muted-foreground">
          <li>• {isZh ? '以清晰目标和边界为前提，不做无定义范围的推进。' : 'We start with clear outcomes and boundaries, not ambiguous execution.'}</li>
          <li>• {isZh ? '同步节奏可按周设置，关键节点保持可见状态更新。' : 'Cadence is usually weekly, with visible updates at key checkpoints.'}</li>
          <li>• {isZh ? '文档和决策记录优先，降低沟通成本与返工风险。' : 'Documentation and decision logs are prioritized to reduce rework.'}</li>
        </ul>
      </section>

      <section class="page-content-main mt-6 page-surface p-6">
        <h2 class="text-xl font-bold">{isZh ? '付款方式' : 'Payment Terms'}</h2>
        <div class="mt-4 flex flex-wrap gap-3">
          <div class="flex-1 min-w-[120px] rounded-lg border border-border/70 p-4 text-center">
            <p class="text-2xl font-bold text-primary">40%</p>
            <p class="text-sm text-muted-foreground">{isZh ? '预付款' : 'Upfront'}</p>
          </div>
          <div class="flex-1 min-w-[120px] rounded-lg border border-border/70 p-4 text-center">
            <p class="text-2xl font-bold text-primary">40%</p>
            <p class="text-sm text-muted-foreground">{isZh ? '中期验收' : 'Mid Review'}</p>
          </div>
          <div class="flex-1 min-w-[120px] rounded-lg border border-border/70 p-4 text-center">
            <p class="text-2xl font-bold text-primary">20%</p>
            <p class="text-sm text-muted-foreground">{isZh ? '尾款' : 'Completion'}</p>
          </div>
        </div>
      </section>

      <section class="page-content-main mt-6 page-surface p-6">
        <h2 class="text-xl font-bold">{isZh ? '常见问题' : 'FAQ'}</h2>
        <div class="mt-4 space-y-4">
          {collaborationFaq.map((item) => (
            <div class="rounded-md border border-border/70 p-4">
              <p class="text-sm font-semibold">{item.question[lang]}</p>
              <p class="mt-2 text-sm text-muted-foreground">{item.answer[lang]}</p>
            </div>
          ))}
        </div>
      </section>

      <section class="page-content-main mt-6 page-surface p-6">
        <h2 class="text-xl font-bold">{isZh ? '下一步' : 'Next Step'}</h2>
        <p class="mt-3 text-sm text-muted-foreground">
          {isZh
            ? '如果你觉得方向匹配，直接在本页下方联系卡片里选择你习惯的方式联系我。'
            : 'If this direction fits, use the contact card below and send a short context brief.'}
        </p>
        <div class="mt-5 flex flex-wrap gap-3">
          <a href="#contact-card" class="inline-flex h-10 items-center rounded-lg bg-primary px-5 text-sm font-semibold text-primary-foreground">
            {isZh ? '查看联系卡片' : 'Open Contact Card'}
          </a>
          <a href={isZh ? '/zh/projects' : '/projects'} class="inline-flex h-10 items-center rounded-lg border border-border px-5 text-sm font-semibold hover:bg-muted">
            {isZh ? '先看案例' : 'View Cases First'}
          </a>
        </div>
      </section>

      <ContactCard lang={lang} showIntents={false} />
    </Container>
  </main>

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