---
import { contactIntents, contactMethods } from "@/lib/data";
import ContactReveal from "@/components/ContactReveal";
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, index) => (
                <ContactReveal
                    client:load
                    key={index}
                    label={method.label[lang]}
                    value={method.value}
                    href={method.href}
                    isZh={isZh}
                />
            ))
        }
    </ul>
</section>
