---
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' ? '合作' : 'Hire Me';
---

<Layout title={pageTitle}>
  <GlassHeader lang={lang} client:only="react" />
  <main class="min-h-screen">
    <!-- Hire 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">
            {lang === 'zh' ? '专业合作' : 'Professional Collaboration'}
          </span>
          <h1 class="page-title-gradient text-5xl md:text-6xl font-bold mb-6">
            {lang === 'zh' ? '合作' : 'Hire Me'}
          </h1>
          <p class="text-lg text-muted-foreground max-w-2xl mx-auto">
            {lang === 'zh'
              ? '构建优秀产品，从找到合适的技术合伙人开始'
              : 'Building great products starts with finding the right technical partner'}
          </p>
        </div>
      </Container>
    </section>

    <!-- Who I Work With -->
    <section class="py-16 relative">
      <Container>
        <div class="max-w-4xl mx-auto">
          <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">
              {lang === 'zh' ? '我与谁合作' : 'Who I Work With'}
            </h2>
          </div>

          <div class="grid md:grid-cols-2 gap-6">
            <div class="page-surface p-6">
              <h3 class="text-lg font-bold mb-3">
                {lang === 'zh' ? '初创公司' : 'Startups'}
              </h3>
              <p class="text-muted-foreground">
                {lang === 'zh'
                  ? '从零到一构建产品的早期创业团队，需要快速迭代和灵活响应的技术方案。'
                  : 'Early-stage startup teams building products from scratch, needing fast iteration and flexible technical solutions.'}
              </p>
            </div>

            <div class="page-surface p-6">
              <h3 class="text-lg font-bold mb-3">
                {lang === 'zh' ? '独立创始人' : 'Indie Hackers'}
              </h3>
              <p class="text-muted-foreground">
                {lang === 'zh'
                  ? '独自构建产品的创业者，需要技术合伙人来实现产品愿景。'
                  : 'Solo founders building products who need a technical partner to realize their product vision.'}
              </p>
            </div>

            <div class="page-surface p-6">
              <h3 class="text-lg font-bold mb-3">
                {lang === 'zh' ? '传统企业' : 'Traditional Businesses'}
              </h3>
              <p class="text-muted-foreground">
                {lang === 'zh'
                  ? '希望数字化转型的传统企业，需要现代化的技术解决方案。'
                  : 'Traditional businesses looking to go digital and need modern technical solutions.'}
              </p>
            </div>

            <div class="page-surface p-6">
              <h3 class="text-lg font-bold mb-3">
                {lang === 'zh' ? '技术团队' : 'Technical Teams'}
              </h3>
              <p class="text-muted-foreground">
                {lang === 'zh'
                  ? '需要额外技术资源或特定技能集来推进项目的开发团队。'
                  : 'Development teams needing additional technical resources or specific skill sets to move projects forward.'}
              </p>
            </div>
          </div>
        </div>
      </Container>
    </section>

    <!-- What I Build -->
    <section class="py-16 relative page-section-soft">
      <Container>
        <div class="max-w-4xl mx-auto">
          <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">
              {lang === 'zh' ? '我能构建什么' : 'What I Build'}
            </h2>
          </div>

          <div class="space-y-6">
            <div class="page-surface p-8">
              <div class="flex items-start gap-4">
                <div class="w-12 h-12 bg-gradient-to-br from-primary to-blue-600 rounded-xl flex items-center justify-center flex-shrink-0">
                  <span class="text-2xl">⚡</span>
                </div>
                <div>
                  <h3 class="text-xl font-bold mb-2">AI 产品与应用</h3>
                  <p class="text-muted-foreground">
                    {lang === 'zh'
                      ? '从 AI 助手到 Agent 系统，从 RAG 应用到 AI 驱动的 SaaS 产品。我可以帮助你将 AI 能力产品化。'
                      : 'From AI assistants to Agent systems, from RAG applications to AI-powered SaaS products. I can help you productize AI capabilities.'}
                  </p>
                </div>
              </div>
            </div>

            <div class="page-surface p-8">
              <div class="flex items-start gap-4">
                <div class="w-12 h-12 bg-gradient-to-br from-green-600 to-teal-600 rounded-xl flex items-center justify-center flex-shrink-0">
                  <span class="text-2xl">🌐</span>
                </div>
                <div>
                  <h3 class="text-xl font-bold mb-2">Web 应用</h3>
                  <p class="text-muted-foreground">
                    {lang === 'zh'
                      ? '现代 Web 应用、SaaS 平台、电商系统、内容管理系统等。使用 React、Next.js、Node.js 等技术栈。'
                      : 'Modern web applications, SaaS platforms, e-commerce systems, content management systems, etc. Using React, Next.js, Node.js and other tech stacks.'}
                  </p>
                </div>
              </div>
            </div>

            <div class="page-surface p-8">
              <div class="flex items-start gap-4">
                <div class="w-12 h-12 bg-gradient-to-br from-orange-600 to-red-600 rounded-xl flex items-center justify-center flex-shrink-0">
                  <span class="text-2xl">📱</span>
                </div>
                <div>
                  <h3 class="text-xl font-bold mb-2">全栈产品</h3>
                  <p class="text-muted-foreground">
                    {lang === 'zh'
                      ? '从前端到后端，从数据库到部署，我提供完整的全栈开发能力，一个项目只需一个开发者。'
                      : 'From frontend to backend, from database to deployment, I provide complete full-stack development capabilities - one developer for the entire project.'}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Container>
    </section>

    <!-- Engagement Models -->
    <section class="py-16 relative">
      <Container>
        <div class="max-w-4xl mx-auto">
          <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">
              {lang === 'zh' ? '合作模式' : 'Engagement Models'}
            </h2>
          </div>

          <div class="grid md:grid-cols-3 gap-6">
            <div class="page-surface p-6 text-center">
              <div class="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center mx-auto mb-4">
                <span class="text-2xl">🤝</span>
              </div>
              <h3 class="text-lg font-bold mb-2">
                {lang === 'zh' ? '技术合伙人' : 'Technical Co-founder'}
              </h3>
              <p class="text-sm text-muted-foreground">
                {lang === 'zh'
                  ? '长期合作，股权合作，共同承担创业风险与回报'
                  : 'Long-term partnership, equity-based, sharing startup risks and rewards'}
              </p>
            </div>

            <div class="page-surface p-6 text-center">
              <div class="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center mx-auto mb-4">
                <span class="text-2xl">💰</span>
              </div>
              <h3 class="text-lg font-bold mb-2">
                {lang === 'zh' ? '项目制' : 'Project-based'}
              </h3>
              <p class="text-sm text-muted-foreground">
                {lang === 'zh'
                  ? '按项目交付，固定价格或按阶段付款，适合明确需求的项目'
                  : 'Fixed-price or milestone-based, suitable for projects with clear requirements'}
              </p>
            </div>

            <div class="page-surface p-6 text-center">
              <div class="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center mx-auto mb-4">
                <span class="text-2xl">⏰</span>
              </div>
              <h3 class="text-lg font-bold mb-2">
                {lang === 'zh' ? '咨询/顾问' : 'Consulting'}
              </h3>
              <p class="text-sm text-muted-foreground">
                {lang === 'zh'
                  ? '按小时咨询，帮助你做出技术决策，审查代码，指导团队'
                  : 'Hourly consulting, helping you make technical decisions, code reviews, team guidance'}
              </p>
            </div>
          </div>
        </div>
      </Container>
    </section>

    <!-- Delivery Style -->
    <section class="py-16 relative page-section-soft">
      <Container>
        <div class="max-w-4xl mx-auto">
          <div class="flex items-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">
              {lang === 'zh' ? '工作方式' : 'Delivery Style'}
            </h2>
          </div>

          <div class="page-surface p-8">
            <ul class="space-y-4">
              <li class="flex items-start gap-3">
                <span class="text-green-500 text-xl">✓</span>
                <div>
                  <strong class="block mb-1">
                    {lang === 'zh' ? '敏捷迭代' : 'Agile Iteration'}
                  </strong>
                  <p class="text-muted-foreground text-sm">
                    {lang === 'zh'
                      ? '2周一个迭代，快速交付可用功能，持续获取反馈'
                      : '2-week sprints, rapid delivery of usable features, continuous feedback'}
                  </p>
                </div>
              </li>
              <li class="flex items-start gap-3">
                <span class="text-green-500 text-xl">✓</span>
                <div>
                  <strong class="block mb-1">
                    {lang === 'zh' ? '透明沟通' : 'Transparent Communication'}
                  </strong>
                  <p class="text-muted-foreground text-sm">
                    {lang === 'zh'
                      ? '定期同步进度，及时报告问题，保持信息对称'
                      : 'Regular progress updates, timely issue reporting, keeping information symmetric'}
                  </p>
                </div>
              </li>
              <li class="flex items-start gap-3">
                <span class="text-green-500 text-xl">✓</span>
                <div>
                  <strong class="block mb-1">
                    {lang === 'zh' ? '代码质量' : 'Code Quality'}
                  </strong>
                  <p class="text-muted-foreground text-sm">
                    {lang === 'zh'
                      ? '完整的测试覆盖，清晰的文档注释，可维护的代码结构'
                      : 'Complete test coverage, clear documentation, maintainable code structure'}
                  </p>
                </div>
              </li>
              <li class="flex items-start gap-3">
                <span class="text-green-500 text-xl">✓</span>
                <div>
                  <strong class="block mb-1">
                    {lang === 'zh' ? '产品思维' : 'Product Thinking'}
                  </strong>
                  <p class="text-muted-foreground text-sm">
                    {lang === 'zh'
                      ? '不只是写代码，还思考产品价值，用户体验和业务目标'
                      : 'Not just writing code, but also thinking about product value, user experience, and business goals'}
                  </p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </Container>
    </section>

    <!-- Availability -->
    <section class="py-16 relative">
      <Container>
        <div class="max-w-4xl mx-auto">
          <div class="flex items-center gap-4 mb-8">
            <div class="w-12 h-12 bg-red-500/20 rounded-xl flex items-center justify-center">
              <span class="text-2xl">📅</span>
            </div>
            <h2 class="text-3xl font-bold">
              {lang === 'zh' ? '当前可用性' : 'Availability'}
            </h2>
          </div>

          <div class="page-surface p-8">
            <div class="flex items-center gap-4 mb-6">
              <div class="w-4 h-4 bg-green-500 rounded-full animate-pulse"></div>
              <span class="text-lg font-semibold">
                {lang === 'zh' ? '目前可接受新项目' : 'Currently Available for New Projects'}
              </span>
            </div>
            <p class="text-muted-foreground mb-6">
              {lang === 'zh'
                ? '我目前可以接受 1-2 个新项目。偏好长期合作模式（技术合伙人或长期项目），但也会考虑短期项目。'
                : 'I can currently take on 1-2 new projects. Prefer long-term partnership (technical co-founder or long-term projects), but also open to short-term projects.'}
            </p>
            <div class="flex flex-wrap gap-2">
              <span class="px-3 py-1 bg-green-500/20 text-green-600 dark:text-green-400 rounded-full text-sm">
                {lang === 'zh' ? '可立即开始' : 'Available immediately'}
              </span>
              <span class="px-3 py-1 bg-blue-500/20 text-blue-600 dark:text-blue-400 rounded-full text-sm">
                {lang === 'zh' ? '远程工作' : 'Remote only'}
              </span>
              <span class="px-3 py-1 bg-primary/20 text-primary dark:text-primary rounded-full text-sm">
                {lang === 'zh' ? '中英双语' : 'Bilingual EN/ZH'}
              </span>
            </div>
          </div>
        </div>
      </Container>
    </section>

    <!-- Contact CTA -->
    <section class="py-16 relative page-section-soft">
      <Container>
        <div class="max-w-4xl mx-auto text-center">
          <h2 class="text-3xl font-bold mb-6">
            {lang === 'zh' ? '准备好一起构建了吗？' : 'Ready to build together?'}
          </h2>
          <p class="text-lg text-muted-foreground mb-8 max-w-xl mx-auto">
            {lang === 'zh'
              ? '告诉我你的项目想法，让我们看看能否合作。'
              : "Tell me about your project idea and let's see if we can work together."}
          </p>
          <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <a
              href="mailto:zhaoguiyang18@gmail.com"
              class="bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-lg font-semibold transition-colors inline-flex items-center justify-center gap-2"
            >
              <span>📧</span>
              {lang === 'zh' ? '发送邮件' : 'Send Email'}
            </a>
            <a
              href={lang === 'zh' ? '/zh/now' : '/now'}
              class="border border-primary text-primary hover:bg-primary hover:text-white px-8 py-3 rounded-lg font-semibold transition-colors inline-flex items-center justify-center gap-2"
            >
              <span>📡</span>
              {lang === 'zh' ? '了解更多关于我' : 'Learn More About Me'}
            </a>
          </div>
        </div>
      </Container>
    </section>
  </main>
  <Footer lang={lang} client:only="react" />
</Layout>