import type { Metadata } from "next";
import { Mail, MessageCircle, Code2 } from "lucide-react";
import { LegalLayout } from "@/components/legal/legal-layout";

export const metadata: Metadata = {
  title: "Liên hệ",
  description: "Liên hệ với đội ngũ Tử Vi Số — phản hồi, hợp tác, hỗ trợ.",
};

export default function ContactPage() {
  return (
    <LegalLayout
      title="Liên hệ"
      subtitle="Mọi câu hỏi, góp ý, đề xuất tính năng đều được chúng tôi đón nhận."
    >
      <div className="grid gap-4 sm:grid-cols-2">
        <ContactCard
          icon={<Mail className="h-5 w-5" aria-hidden="true" />}
          label="Email"
          value="hello@tuvi-so.example"
          href="mailto:hello@tuvi-so.example"
        />
        <ContactCard
          icon={<MessageCircle className="h-5 w-5" aria-hidden="true" />}
          label="Hỗ trợ kỹ thuật"
          value="support@tuvi-so.example"
          href="mailto:support@tuvi-so.example"
        />
        <ContactCard
          icon={<Mail className="h-5 w-5" aria-hidden="true" />}
          label="Bảo mật / Pháp lý"
          value="privacy@tuvi-so.example"
          href="mailto:privacy@tuvi-so.example"
        />
        <ContactCard
          icon={<Code2 className="h-5 w-5" aria-hidden="true" />}
          label="GitHub"
          value="github.com/tuvi-so"
          href="https://github.com/tuvi-so"
        />
      </div>

      <div className="border-stroke-default bg-bg-elevated/40 mt-8 rounded-xl border p-6">
        <h2 className="font-display mb-2 text-xl font-semibold">Thời gian phản hồi</h2>
        <p className="text-ink-secondary text-sm">
          Email thường được trả lời trong vòng 24—48 giờ làm việc (giờ Việt Nam, GMT+7). Yêu cầu
          khẩn cấp về bảo mật được xử lý trong 4 giờ.
        </p>
      </div>
    </LegalLayout>
  );
}

function ContactCard({
  icon,
  label,
  value,
  href,
}: {
  icon: React.ReactNode;
  label: string;
  value: string;
  href: string;
}) {
  return (
    <a
      href={href}
      className="border-stroke-default bg-bg-elevated/40 hover:border-brand-gold/40 group flex items-start gap-3 rounded-xl border p-5 transition"
    >
      <span className="text-brand-gold-soft group-hover:text-brand-gold transition-colors">
        {icon}
      </span>
      <div>
        <div className="text-ink-muted text-xs tracking-wider uppercase">{label}</div>
        <div className="text-ink-primary mt-1 text-sm font-medium">{value}</div>
      </div>
    </a>
  );
}