---
import Layout from '@/layouts/Layout.astro';
import GlassHeader from '@/components/GlassHeader';
import Footer from '@/components/Footer';
import Container from '@/components/ui/Container.astro';
import { contactIntents, 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';
---

<Layout title={isZh ? '联系' : 'Contact'}>
  <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 ? '联系' : 'Contact'}</h1>
        <p class="mt-4 text-lg text-muted-foreground">
          {isZh
            ? '欢迎联系我沟通远程岗位或项目合作。默认优先响应远程岗位机会。'
            : 'Open to remote role opportunities and project collaboration. Remote role discussions are prioritized.'}
        </p>
      </section>

      <section class="page-content-main mt-10 grid gap-6 md:grid-cols-2">
        {contactIntents.map((intent) => (
          <article id={intent.id} class="page-surface p-6">
            <h2 class="text-xl font-bold">{intent.title[lang]}</h2>
            <p class="mt-3 text-muted-foreground">{intent.description[lang]}</p>
          </article>
        ))}
      </section>

      <section class="page-content-main mt-6 page-surface p-6">
        <h2 class="text-xl font-bold">{isZh ? '联系方式' : 'Contact Methods'}</h2>
        <ul class="mt-4 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>

        <p class="mt-5 text-xs text-muted-foreground">
          {isZh
            ? '联系建议：请在邮件中注明岗位/项目背景、期望合作方式与时间窗口。'
            : 'Suggestion: include role/project context, expected collaboration model, and timeline in your first message.'}
        </p>
      </section>
    </Container>
  </main>

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