---
import { contactIntents, contactMethods } from '@/lib/data';
import type { Lang } from '@/types/i18n';

interface Props {
  lang: Lang;
  showIntents?: boolean;
}

const { lang, showIntents = true } = Astro.props;
const isZh = lang === 'zh';
---

<section class="page-content-main mt-6 page-surface p-8" id="contact-card">
  <h2 class="text-2xl font-bold tracking-tight">{isZh ? '联系我' : 'Contact'}</h2>
  <p class="mt-3 text-sm text-muted-foreground">
    {isZh
      ? '欢迎交流岗位机会、专项协作，或工程实践相关话题。'
      : 'Open to role opportunities, scoped collaboration, and engineering discussions.'}
  </p>

  {showIntents && (
    <div class="mt-5 grid gap-4 md:grid-cols-3">
      {contactIntents.map((intent) => (
        <article class="rounded-md border border-border/70 p-4">
          <h3 class="text-sm font-bold">{intent.title[lang]}</h3>
          <p class="mt-2 text-sm text-muted-foreground">{intent.description[lang]}</p>
        </article>
      ))}
    </div>
  )}

  <ul class="mt-6 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 last:border-none last:pb-0">
        <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>
</section>
