import Link from "next/link";
import { listFooterPages } from "@/lib/pages-repo";
import { Mail, Send, Hash, Facebook, Rss } from "lucide-react";

const FOOTER_COLS = [
  {
    title: "Khám phá",
    items: [
      { label: "Crypto", href: "/category/crypto" },
      { label: "Chứng khoán", href: "/category/chung-khoan" },
      { label: "Vàng", href: "/category/vang" },
      { label: "Forex", href: "/category/forex" },
      { label: "Phân tích chuyên sâu", href: "/category/phan-tich" },
      { label: "Tin nóng", href: "/category/tin-nong" },
    ],
  },
  {
    title: "Tòa soạn",
    items: [
      { label: "Giới thiệu", href: "/gioi-thieu" },
      { label: "Liên hệ", href: "/lien-he" },
      { label: "Cộng đồng", href: "/cong-dong" },
      { label: "Chính sách biên tập", href: "/chinh-sach-bien-tap" },
      { label: "Miễn trừ đầu tư", href: "/mien-tru-dau-tu" },
      { label: "Bảo mật", href: "/bao-mat" },
    ],
  },
];

const SOCIALS = [
  { label: "Telegram", href: "https://t.me/finzonenetwork", Icon: Send },
  { label: "Facebook", href: "https://www.facebook.com/finzonenetwork", Icon: Facebook },
  { label: "Zalo", href: "https://zalo.me/g/lkjhonloinvrmnm9xdib", Icon: Hash },
  { label: "RSS", href: "/feed.xml", Icon: Rss },
];

/**
 * V2 "Magazine" Footer — newsletter CTA dominant on top band,
 * minimal sitemap below, big serif outro.
 */
export async function FooterV2() {
  let cmsPages: Array<{ label: string; href: string }> = [];
  try {
    const pages = await listFooterPages();
    cmsPages = pages
      .filter((p) => !["gioi-thieu", "lien-he", "cong-dong"].includes(p.slug))
      .map((p) => ({ label: p.title, href: `/${p.slug}` }));
  } catch (e) {
    console.error("[footer-v2] listFooterPages failed:", e);
  }

  const cols = FOOTER_COLS.map((col) =>
    col.title === "Tòa soạn" && cmsPages.length > 0
      ? { ...col, items: [...col.items, ...cmsPages] }
      : col,
  );

  return (
    <footer style={{ background: "var(--bg)" }}>
      {/* Newsletter CTA band */}
      <section
        className="border-t hairline"
        style={{
          background:
            "linear-gradient(135deg, color-mix(in oklch, var(--accent) 8%, var(--paper)), var(--paper))",
        }}
      >
        <div className="mx-auto max-w-[var(--container-content)] px-6 lg:px-10 py-16 lg:py-24">
          <div className="grid lg:grid-cols-12 gap-10 items-center">
            <div className="lg:col-span-7">
              <div
                className="inline-flex items-center gap-2 text-[11px] uppercase tracking-[0.25em] font-semibold mb-5"
                style={{ color: "var(--accent)" }}
              >
                <Mail size={14} /> Newsletter
              </div>
              <h2
                className="font-[family-name:var(--font-fraunces)] leading-[1.05] tracking-tight mb-5"
                style={{
                  fontSize: "clamp(36px, 5vw, 64px)",
                  color: "var(--ink)",
                  fontWeight: 500,
                  fontVariationSettings: "'opsz' 144, 'SOFT' 30",
                }}
              >
                Đọc Finzone trước khi thị trường mở cửa.
              </h2>
              <p
                className="text-[16px] lg:text-[18px] leading-relaxed font-[family-name:var(--font-newsreader)] italic max-w-2xl"
                style={{ color: "var(--ink-2)" }}
              >
                Tóm lược crypto, chứng khoán, vàng, vĩ mô — gửi tận hộp thư mỗi
                sáng sớm. Miễn phí. Bỏ đăng ký bất kỳ lúc nào.
              </p>
            </div>
            <div className="lg:col-span-5">
              <NewsletterFormV2 />
            </div>
          </div>
        </div>
      </section>

      {/* Sitemap */}
      <div
        className="border-t hairline"
        style={{ background: "var(--paper)" }}
      >
        <div className="mx-auto max-w-[var(--container-content)] px-6 lg:px-10 py-14">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-10">
            <div className="lg:col-span-5">
              <Link
                href="/"
                className="font-[family-name:var(--font-fraunces)] tracking-tight inline-block"
                style={{
                  fontSize: "clamp(48px, 6vw, 88px)",
                  color: "var(--ink)",
                  fontWeight: 500,
                  fontVariationSettings: "'opsz' 144, 'SOFT' 30, 'WONK' 1",
                  lineHeight: 0.95,
                }}
              >
                Finzone
              </Link>
              <p
                className="mt-4 text-[14px] max-w-xs leading-relaxed"
                style={{ color: "var(--ink-2)" }}
              >
                Trang tin tài chính cho nhà đầu tư Việt Nam. Crypto · Chứng
                khoán · Vàng · Forex · Phân tích.
              </p>
              <div className="mt-6 flex items-center gap-2">
                {SOCIALS.map(({ label, href, Icon }) => (
                  <Link
                    key={label}
                    href={href}
                    target={href.startsWith("http") ? "_blank" : undefined}
                    rel={href.startsWith("http") ? "noopener noreferrer" : undefined}
                    aria-label={label}
                    className="inline-flex items-center justify-center w-10 h-10 rounded-full border hairline hover:border-[var(--accent)] hover:text-[var(--accent)] transition"
                    style={{ color: "var(--ink-2)" }}
                  >
                    <Icon size={15} />
                  </Link>
                ))}
              </div>
            </div>

            <div className="lg:col-span-7 grid grid-cols-2 gap-8">
              {cols.map((col) => (
                <div key={col.title}>
                  <div
                    className="text-[10px] uppercase tracking-[0.25em] font-semibold mb-4"
                    style={{ color: "var(--ink-3)" }}
                  >
                    {col.title}
                  </div>
                  <ul className="space-y-2.5 text-[14px]">
                    {col.items.map((it) => (
                      <li key={it.href}>
                        <Link
                          href={it.href}
                          target={it.href.startsWith("http") ? "_blank" : undefined}
                          rel={it.href.startsWith("http") ? "noopener noreferrer" : undefined}
                          className="hover:text-[var(--accent)] transition-colors"
                          style={{ color: "var(--ink-2)" }}
                        >
                          {it.label}
                        </Link>
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          </div>

          <div
            className="mt-14 pt-6 border-t hairline flex flex-wrap items-center justify-between gap-3 text-[12px]"
            style={{ color: "var(--ink-3)" }}
          >
            <span>© {new Date().getFullYear()} Finzone Network. Đã đăng ký.</span>
            <span className="font-[family-name:var(--font-newsreader)] italic">
              Made with care in Vietnam.
            </span>
          </div>
        </div>
      </div>
    </footer>
  );
}

function NewsletterFormV2() {
  return (
    <form
      action="/api/newsletter"
      method="POST"
      className="rounded-2xl border hairline-strong p-6 lg:p-8"
      style={{
        background: "var(--paper)",
        boxShadow:
          "0 30px 60px -30px color-mix(in oklch, var(--accent) 40%, transparent)",
      }}
    >
      <label
        className="block text-[11px] uppercase tracking-[0.25em] font-semibold mb-3"
        style={{ color: "var(--ink-3)" }}
      >
        Email của bạn
      </label>
      <div className="flex gap-2">
        <input
          type="email"
          name="email"
          required
          placeholder="ban@congty.com"
          className="flex-1 px-4 py-3 rounded-lg border bg-transparent text-[15px] focus:outline-none focus:border-[var(--accent)]"
          style={{
            borderColor: "var(--line)",
            color: "var(--ink)",
          }}
        />
        <button
          type="submit"
          className="px-5 py-3 rounded-lg font-semibold text-[14px] text-white transition hover:opacity-90"
          style={{ background: "var(--accent)" }}
        >
          Đăng ký
        </button>
      </div>
      <input type="hidden" name="source" value="footer-v2" />
      <p className="mt-3 text-[12px]" style={{ color: "var(--ink-3)" }}>
        Bằng cách đăng ký bạn đồng ý với{" "}
        <Link href="/bao-mat" className="underline hover:text-[var(--accent)]">
          chính sách bảo mật
        </Link>
        .
      </p>
    </form>
  );
}