import type { Metadata } from "next";
import Link from "next/link";
import { Mail, Send, MessageCircle } from "lucide-react";
import { StaticPage } from "@/components/static-page";

export const metadata: Metadata = {
  title: "Liên hệ",
  description: "Liên hệ với Finzone Network qua email, Telegram, Zalo hoặc Facebook.",
  alternates: { canonical: "/lien-he" },
};

const TELEGRAM_URL = process.env.NEXT_PUBLIC_TELEGRAM_URL ?? "https://t.me/finzonenetwork";
const ZALO_URL = process.env.NEXT_PUBLIC_ZALO_URL ?? "https://zalo.me/g/lkjhonloinvrmnm9xdib";
const FACEBOOK_URL = process.env.NEXT_PUBLIC_FACEBOOK_URL ?? "https://www.facebook.com/finzonenetwork";
const CONTACT_EMAIL = process.env.NEXT_PUBLIC_CONTACT_EMAIL ?? "lienhe@finzone.io.vn";

export default function Page() {
  return (
    <StaticPage
      title="Liên hệ"
      eyebrow="Connect"
      description="Mọi câu hỏi, đính chính, hợp tác hay góp ý về nội dung — chúng tôi đọc tất cả và cố gắng phản hồi trong 48 giờ làm việc."
    >
      <h2>Email</h2>
      <p>
        <a href={`mailto:${CONTACT_EMAIL}`}>{CONTACT_EMAIL}</a> — kênh chính cho phản hồi nội dung,
        đính chính, hợp tác PR/quảng cáo và yêu cầu liên quan đến dữ liệu cá nhân.
      </p>

      <h2>Cộng đồng</h2>
      <p>Tham gia cộng đồng để trao đổi nhanh và nhận tin nóng:</p>

      <div className="not-prose grid grid-cols-1 sm:grid-cols-3 gap-3 my-6">
        <a
          href={TELEGRAM_URL}
          target="_blank"
          rel="noopener noreferrer"
          className="card-modern p-5 text-center"
        >
          <Send size={20} className="mx-auto mb-2" style={{ color: "var(--accent)" }} />
          <div className="display-md mb-1">Telegram</div>
          <div className="text-[12px] font-mono uppercase tracking-wider" style={{ color: "var(--ink-3)" }}>
            t.me/finzonenetwork
          </div>
        </a>
        <a
          href={ZALO_URL}
          target="_blank"
          rel="noopener noreferrer"
          className="card-modern p-5 text-center"
        >
          <MessageCircle size={20} className="mx-auto mb-2" style={{ color: "var(--accent)" }} />
          <div className="display-md mb-1">Zalo Group</div>
          <div className="text-[12px] font-mono uppercase tracking-wider" style={{ color: "var(--ink-3)" }}>
            Nhóm Finzone
          </div>
        </a>
        <a
          href={FACEBOOK_URL}
          target="_blank"
          rel="noopener noreferrer"
          className="card-modern p-5 text-center"
        >
          <Mail size={20} className="mx-auto mb-2" style={{ color: "var(--accent)" }} />
          <div className="display-md mb-1">Facebook</div>
          <div className="text-[12px] font-mono uppercase tracking-wider" style={{ color: "var(--ink-3)" }}>
            Fanpage chính thức
          </div>
        </a>
      </div>

      <h2>Hợp tác và quảng cáo</h2>
      <p>
        Doanh nghiệp muốn đặt banner, native content hoặc đồng tổ chức sự kiện, vui lòng email
        kèm thông tin: tên công ty, hình thức hợp tác mong muốn, ngân sách dự kiến, thời gian.
        Chúng tôi không nhận quảng cáo cho dự án crypto chưa rõ ràng nguồn gốc, sản phẩm
        tài chính không có giấy phép tại Việt Nam.
      </p>

      <h2>Đính chính</h2>
      <p>
        Phát hiện sai sót trong bài? Email hoặc nhắn Telegram link bài + chỗ sai + dẫn chứng
        thay thế. Chính sách đính chính tham khảo tại <Link href="/chinh-sach-bien-tap">Chính sách biên tập</Link>.
      </p>
    </StaticPage>
  );
}