---
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>
                    <span class="text-muted-foreground break-all font-mono text-xs">
                        {method.value}
                    </span>
                    <span class="inline-flex items-center rounded-md bg-muted px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
                        MD5
                    </span>
                </li>
            ))
        }
    </ul>
</section>