import Link from "next/link";
import Image from "next/image";
import { listPosts } from "@/lib/cms";
import { PreviewBar } from "../_bar";

export const metadata = { title: "Mockup G · Almanac Việt Nam · Preview" };
export const dynamic = "force-dynamic";

const CAT_IDS = { tinNong: 148, phanTich: 36, crypto: 37, vang: 252, chungKhoan: 40 };

/**
 * MOCKUP G — Almanac Việt Nam.
 * Lịch vạn niên × tử vi xưa × tạp chí Phong Hóa × bảng tử vi tài chính.
 * Bản địa Việt Nam thật sự — không phải editorial Tây dán nhãn tiếng Việt.
 * Giấy dó, đỏ son, vàng đồng, đen mực tàu. Serif Việt thật. Cấu trúc đặt
 * Ngày Âm Lịch + Hoàng Đạo + Chỉ số TT + Tin tức làm các ô như tờ lịch.
 */
export default async function MockupGPage() {
  const [
    { posts: feat },
    { posts: latest },
    { posts: phanTich },
    { posts: tinNong },
    { posts: crypto },
    { posts: vang },
  ] = await Promise.all([
    listPosts({ perPage: 1, featured: true, orderBy: "date", order: "desc" }),
    listPosts({ perPage: 12, orderBy: "date", order: "desc" }),
    listPosts({ perPage: 5, categories: [CAT_IDS.phanTich] }),
    listPosts({ perPage: 6, categories: [CAT_IDS.tinNong] }),
    listPosts({ perPage: 4, categories: [CAT_IDS.crypto] }),
    listPosts({ perPage: 4, categories: [CAT_IDS.vang] }),
  ]);

  const heroPost = feat[0] ?? phanTich[0] ?? latest[0];
  const used = new Set<string | number>();
  if (heroPost) used.add(heroPost.id);
  const wallTin = tinNong.filter((p) => !used.has(p.id)).slice(0, 5);
  wallTin.forEach((p) => used.add(p.id));
  const colPhanTich = phanTich.filter((p) => !used.has(p.id)).slice(0, 4);
  const colCrypto = crypto.slice(0, 3);
  const colVang = vang.slice(0, 3);

  // Tokens — paper, ink, vermillion, gold
  const PAPER = "#F1E8D0";
  const PAPER_DEEP = "#E8DCB8";
  const PAPER_LIGHT = "#F8F1DC";
  const INK = "#1A0F08";
  const INK2 = "#3D2817";
  const INK3 = "#6B5135";
  const VERMI = "#B5251F"; // đỏ son
  const VERMI_DEEP = "#8B1A14";
  const GOLD = "#A88234"; // vàng đồng
  const JADE = "#3F6B3D";

  const SERIF = "var(--font-fraunces)";
  const READ = "var(--font-newsreader)";
  const MONO = "var(--font-jetbrains-mono)";

  // Calc lunar approx (simplified deterministic mapping — for visual mock only)
  const today = new Date();
  const lunarDay = (today.getDate() + 14) % 30 || 30;
  const lunarMonth = ((today.getMonth() + 1) % 12) + 1;
  const lunarYearStem = ["Giáp","Ất","Bính","Đinh","Mậu","Kỷ","Canh","Tân","Nhâm","Quý"][(today.getFullYear() - 4) % 10];
  const lunarYearBranch = ["Tý","Sửu","Dần","Mão","Thìn","Tỵ","Ngọ","Mùi","Thân","Dậu","Tuất","Hợi"][(today.getFullYear() - 4) % 12];
  const dayBranch = ["Tý","Sửu","Dần","Mão","Thìn","Tỵ","Ngọ","Mùi","Thân","Dậu","Tuất","Hợi"][today.getDate() % 12];
  const dayStem = ["Giáp","Ất","Bính","Đinh","Mậu","Kỷ","Canh","Tân","Nhâm","Quý"][today.getDate() % 10];

  const fmtDate = (d: string) => {
    const x = new Date(d);
    return `${x.getDate()}.${x.getMonth() + 1}`;
  };

  return (
    <div
      style={{
        background: PAPER,
        color: INK,
        minHeight: "100vh",
        fontFamily: READ,
        backgroundImage:
          "radial-gradient(circle at 20% 30%, rgba(168,130,52,0.06) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(181,37,31,0.04) 0%, transparent 50%)",
      }}
    >
      <PreviewBar active="g" />

      {/* MASTHEAD — calligraphy meets ledger */}
      <header className="border-b-[3px] border-double" style={{ borderColor: INK }}>
        <div className="mx-auto max-w-[1320px] px-6 lg:px-10 py-4">
          {/* Top row — date utility */}
          <div className="flex items-center justify-between gap-4 text-[11px] uppercase tracking-[0.25em] pb-3 border-b" style={{ borderColor: INK3, fontFamily: MONO, color: INK2 }}>
            <span>
              Số {today.getDate().toString().padStart(2,"0")}.
              {(today.getMonth()+1).toString().padStart(2,"0")}.
              {today.getFullYear()}
            </span>
            <span className="hidden md:inline" style={{ color: VERMI }}>
              ⌘ Năm {lunarYearStem} {lunarYearBranch} · Tháng {lunarMonth} ÂL · Ngày {lunarDay}
            </span>
            <span>vi-VN · Việt Nam</span>
          </div>

          {/* Wordmark */}
          <div className="grid grid-cols-12 items-center mt-5 gap-4">
            <div className="col-span-3 text-[11px] uppercase tracking-[0.2em] text-right hidden lg:block" style={{ color: INK3 }}>
              <div className="font-mono mb-1">Khai bút</div>
              <div style={{ fontFamily: SERIF, fontSize: 16, fontStyle: "italic", color: VERMI }}>
                "Buôn ngay bán thẳng"
              </div>
            </div>
            <Link href="/" className="col-span-12 lg:col-span-6 text-center">
              <div
                style={{
                  fontFamily: SERIF,
                  fontSize: "clamp(56px, 9vw, 124px)",
                  lineHeight: 0.9,
                  letterSpacing: "-0.03em",
                  fontWeight: 500,
                  color: INK,
                  fontVariationSettings: "'opsz' 144, 'SOFT' 60, 'WONK' 1",
                }}
              >
                Tài Lộc <span style={{ color: VERMI, fontStyle: "italic" }}>Báo</span>
              </div>
              <div className="mt-1 text-[12px] tracking-[0.4em] uppercase" style={{ color: INK3, fontFamily: MONO }}>
                ── Finzone · Almanac ──
              </div>
            </Link>
            <div className="col-span-3 text-[11px] uppercase tracking-[0.2em] text-left hidden lg:block" style={{ color: INK3 }}>
              <div className="font-mono mb-1">Tử vi</div>
              <div style={{ fontFamily: SERIF, fontSize: 16, fontStyle: "italic", color: VERMI }}>
                Hỷ thần: Đông Bắc
              </div>
            </div>
          </div>

          {/* Nav */}
          <nav className="mt-6 pt-4 border-t flex flex-wrap justify-center items-center gap-x-8 gap-y-2 text-[13px] uppercase tracking-[0.15em]"
            style={{ borderColor: INK3, color: INK }}>
            {[
              ["Tin chợ","/category/tin-nong"],
              ["Bình luận","/category/phan-tich"],
              ["Tiền số","/category/crypto"],
              ["Cổ phiếu","/category/chung-khoan"],
              ["Vàng — Bạc","/category/vang"],
              ["Ngoại tệ","/category/forex"],
              ["Niên giám","/cong-dong"],
            ].map(([l,h]) => (
              <Link key={h} href={h!} className="hover:text-[var(--vermi)] relative" style={{ ["--vermi" as string]: VERMI }}>
                {l}
              </Link>
            ))}
          </nav>
        </div>
      </header>

      {/* DAILY ALMANAC STRIP — lunar/zodiac/market in one ledger row */}
      <section className="border-b" style={{ borderColor: INK, background: PAPER_DEEP }}>
        <div className="mx-auto max-w-[1320px] px-6 lg:px-10 py-5">
          <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-x-8 gap-y-4 text-[12px]">
            {[
              { label: "Ngày", val: `${dayStem} ${dayBranch}`, sub: `Mộc · Thuận` },
              { label: "Hoàng đạo", val: "Tốt", sub: "Khai trương · Giao dịch", color: JADE },
              { label: "Tài thần", val: "Hướng Tây", sub: "Cát thời: Tỵ Ngọ" },
              { label: "VN-Index", val: "1287.42", sub: "+0.42%", color: JADE, mono: true },
              { label: "Vàng SJC", val: "76.4M", sub: "+0.13%", color: GOLD, mono: true },
              { label: "USD/VND", val: "25,420", sub: "+0.05%", color: VERMI, mono: true },
              { label: "BTC", val: "68,420", sub: "−1.24%", color: VERMI, mono: true },
            ].map((d) => (
              <div key={d.label}>
                <div className="text-[10px] uppercase tracking-[0.2em] mb-0.5" style={{ color: INK3, fontFamily: MONO }}>
                  {d.label}
                </div>
                <div
                  className={`text-[18px] font-semibold ${d.mono ? "tabular-nums" : ""}`}
                  style={{ color: INK, fontFamily: d.mono ? MONO : SERIF, letterSpacing: d.mono ? 0 : "-0.01em" }}
                >
                  {d.val}
                </div>
                <div className="text-[10px] mt-0.5" style={{ color: d.color ?? INK3, fontFamily: d.mono ? MONO : READ, fontStyle: d.mono ? "normal" : "italic" }}>
                  {d.sub}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <main>
        {/* HERO — woodcut-style banner with vermillion seal */}
        {heroPost && (
          <section className="border-b" style={{ borderColor: INK }}>
            <div className="mx-auto max-w-[1320px] px-6 lg:px-10 py-12 lg:py-16 relative">
              {/* Vermillion seal */}
              <div
                className="absolute top-10 right-6 lg:right-10 w-20 h-20 lg:w-28 lg:h-28 flex items-center justify-center text-center rotate-6"
                style={{
                  background: VERMI,
                  color: PAPER,
                  fontFamily: SERIF,
                  fontWeight: 600,
                  fontSize: 14,
                  lineHeight: 1.1,
                  border: `3px double ${PAPER}`,
                  boxShadow: `0 0 0 1px ${VERMI}`,
                  fontVariationSettings: "'opsz' 144, 'WONK' 1",
                }}
              >
                <div>
                  TIÊU<br/>ĐIỂM<br/>HÔM<br/>NAY
                </div>
              </div>

              <div className="grid grid-cols-12 gap-8">
                {/* Vertical seal-like eyebrow */}
                <div className="col-span-12 lg:col-span-1 flex lg:flex-col items-start lg:items-center gap-2 text-[11px] uppercase tracking-[0.3em] font-mono" style={{ color: VERMI }}>
                  <span className="lg:[writing-mode:vertical-rl] lg:rotate-180 font-bold">
                    Khai mục — Số 01
                  </span>
                </div>

                <div className="col-span-12 lg:col-span-7">
                  <div className="text-[11px] uppercase tracking-[0.3em] font-mono mb-5" style={{ color: VERMI }}>
                    {heroPost.categories[0]?.name ?? "Trang đầu"} · {fmtDate(heroPost.date)} ÂL
                  </div>
                  <Link href={`/${heroPost.slug}`} className="group block">
                    <h1
                      className="group-hover:text-[var(--vermi)] transition-colors mb-6"
                      style={{
                        fontFamily: SERIF,
                        fontSize: "clamp(38px, 5.6vw, 84px)",
                        lineHeight: 1.02,
                        letterSpacing: "-0.025em",
                        fontWeight: 400,
                        color: INK,
                        ["--vermi" as string]: VERMI,
                        fontVariationSettings: "'opsz' 144, 'SOFT' 60, 'WONK' 1",
                      }}
                    >
                      {heroPost.title}
                    </h1>
                  </Link>
                  {heroPost.excerpt && (
                    <p
                      className="text-[18px] lg:text-[20px] leading-[1.65] mb-6 max-w-2xl"
                      style={{ color: INK2, fontFamily: READ, fontStyle: "italic" }}
                    >
                      <span style={{ color: VERMI, fontFamily: SERIF, fontStyle: "normal", fontWeight: 600 }}>「 </span>
                      {heroPost.excerpt}
                      <span style={{ color: VERMI, fontFamily: SERIF, fontStyle: "normal", fontWeight: 600 }}> 」</span>
                    </p>
                  )}
                  <div className="flex flex-wrap items-center gap-3 text-[12px] uppercase tracking-[0.2em] font-mono" style={{ color: INK3 }}>
                    <span className="font-bold" style={{ color: INK }}>Bút ký: {heroPost.author.name}</span>
                    <span>·</span>
                    <span>{heroPost.readMinutes} phút đọc</span>
                    <span>·</span>
                    <span style={{ color: VERMI }}>● Đáng đọc</span>
                  </div>
                </div>

                <aside className="col-span-12 lg:col-span-4 lg:border-l-2 lg:pl-8" style={{ borderColor: INK }}>
                  {heroPost.featured && (
                    <div
                      className="relative aspect-[4/5] mb-5 overflow-hidden"
                      style={{ filter: "sepia(0.18) contrast(1.05) saturate(0.85)", border: `2px solid ${INK}` }}
                    >
                      <Image
                        src={heroPost.featured.url}
                        alt={heroPost.featured.alt}
                        fill
                        sizes="(max-width: 1024px) 100vw, 33vw"
                        className="object-cover"
                      />
                    </div>
                  )}
                  <div className="text-[11px] uppercase tracking-[0.25em] font-mono mb-3" style={{ color: VERMI }}>
                    ▦ Quẻ đầu kỳ
                  </div>
                  <div
                    className="text-[16px] leading-[1.65] italic"
                    style={{ fontFamily: READ, color: INK2 }}
                  >
                    "Mây tan trời sáng — kẻ giữ tiền nên ngó trước nhìn sau. Đắc thời thì
                    tiến, mất thế thì hoãn. Tránh giao dịch lớn buổi chiều giờ Dậu."
                  </div>
                </aside>
              </div>
            </div>
          </section>
        )}

        {/* DOUBLE-RULE BAND */}
        <div className="border-y-[3px] border-double py-4 px-6" style={{ borderColor: INK, background: PAPER_LIGHT }}>
          <div className="mx-auto max-w-[1320px] flex flex-wrap items-baseline justify-between gap-4 text-[12px] uppercase tracking-[0.3em]" style={{ color: INK3, fontFamily: MONO }}>
            <span>◆ Tin chợ — phiên hôm nay</span>
            <span style={{ color: VERMI }}>● Hồi cuối: {today.toLocaleTimeString("vi-VN", {hour:"2-digit", minute:"2-digit"})}</span>
            <span>{wallTin.length} tin / {colPhanTich.length} bình luận</span>
          </div>
        </div>

        {/* TIN — newspaper column block */}
        {wallTin.length > 0 && (
          <section className="border-b" style={{ borderColor: INK }}>
            <div className="mx-auto max-w-[1320px] px-6 lg:px-10 py-12">
              <div className="grid grid-cols-12 gap-8">
                {/* Lead news — left half */}
                {wallTin[0] && (
                  <article className="col-span-12 lg:col-span-7 lg:border-r-2 lg:pr-8" style={{ borderColor: INK }}>
                    <div className="text-[10px] uppercase tracking-[0.3em] font-mono mb-3" style={{ color: VERMI }}>
                      Tiêu điểm phiên ▶
                    </div>
                    <Link href={`/${wallTin[0].slug}`} className="group block">
                      {wallTin[0].featured && (
                        <div className="relative aspect-[16/10] mb-5 overflow-hidden"
                          style={{ filter: "sepia(0.15) contrast(1.05) saturate(0.85)" }}>
                          <Image src={wallTin[0].featured.url} alt={wallTin[0].featured.alt} fill sizes="(max-width:1024px) 100vw, 60vw" className="object-cover" />
                        </div>
                      )}
                      <h3
                        className="group-hover:text-[var(--vermi)] transition-colors mb-4"
                        style={{
                          fontFamily: SERIF,
                          fontSize: "clamp(28px, 3.6vw, 44px)",
                          lineHeight: 1.08,
                          fontWeight: 500,
                          letterSpacing: "-0.02em",
                          color: INK,
                          ["--vermi" as string]: VERMI,
                          fontVariationSettings: "'opsz' 144",
                        }}
                      >
                        {wallTin[0].title}
                      </h3>
                    </Link>
                    {wallTin[0].excerpt && (
                      <p className="text-[15px] leading-[1.65]" style={{ color: INK2, fontFamily: READ }}>
                        <span
                          className="float-left mr-2 mt-1 leading-[0.85]"
                          style={{ fontFamily: SERIF, fontSize: 56, fontWeight: 500, color: VERMI }}
                        >
                          {wallTin[0].excerpt.charAt(0).toUpperCase()}
                        </span>
                        {wallTin[0].excerpt.slice(1)}
                      </p>
                    )}
                  </article>
                )}

                {/* Right side mini stack */}
                <div className="col-span-12 lg:col-span-5">
                  <div className="text-[10px] uppercase tracking-[0.3em] font-mono mb-4 pb-2 border-b-2" style={{ color: INK, borderColor: INK }}>
                    Cùng phiên
                  </div>
                  <ul className="space-y-5">
                    {wallTin.slice(1).map((p, i) => (
                      <li key={p.id} className="pb-5 border-b last:border-b-0" style={{ borderColor: INK3 }}>
                        <Link href={`/${p.slug}`} className="block group flex gap-4">
                          <span
                            className="shrink-0 w-9 h-9 flex items-center justify-center text-[16px] font-bold tabular-nums"
                            style={{ background: VERMI, color: PAPER, fontFamily: SERIF }}
                          >
                            {String(i + 2).padStart(2, "0")}
                          </span>
                          <div className="flex-1">
                            <h4
                              className="group-hover:text-[var(--vermi)] transition-colors mb-1.5"
                              style={{
                                fontFamily: SERIF,
                                fontSize: 18,
                                lineHeight: 1.2,
                                fontWeight: 500,
                                color: INK,
                                ["--vermi" as string]: VERMI,
                              }}
                            >
                              {p.title}
                            </h4>
                            <div className="text-[11px] uppercase tracking-[0.2em] font-mono" style={{ color: INK3 }}>
                              {p.categories[0]?.name ?? "Tin"} · {p.readMinutes}'
                            </div>
                          </div>
                        </Link>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            </div>
          </section>
        )}

        {/* TỬ VI TÀI CHÍNH — fortune table */}
        <section className="border-b" style={{ borderColor: INK, background: PAPER_DEEP }}>
          <div className="mx-auto max-w-[1320px] px-6 lg:px-10 py-12 lg:py-16">
            <div className="text-center mb-10">
              <div className="text-[11px] uppercase tracking-[0.4em] font-mono mb-3" style={{ color: VERMI }}>
                ◆ Tử vi tài lộc tuần này ◆
              </div>
              <h2
                style={{
                  fontFamily: SERIF,
                  fontSize: "clamp(36px, 5.4vw, 68px)",
                  fontStyle: "italic",
                  fontWeight: 400,
                  letterSpacing: "-0.02em",
                  color: INK,
                  fontVariationSettings: "'opsz' 144, 'SOFT' 60, 'WONK' 1",
                }}
              >
                Mỗi tuổi một thế.
              </h2>
              <p className="mt-3 text-[14px] italic max-w-xl mx-auto" style={{ color: INK2, fontFamily: READ }}>
                Mười hai con giáp, mười hai phương đầu tư. Bản chỉ dẫn không phải lời khuyên — chỉ là lời nhắc.
              </p>
            </div>

            <div className="grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-6 gap-px" style={{ background: INK }}>
              {[
                { name: "Tý", elem: "Thủy", rating: "Cát", color: JADE, hint: "Giữ tiền mặt" },
                { name: "Sửu", elem: "Thổ", rating: "Bình", color: GOLD, hint: "Mua dần vàng" },
                { name: "Dần", elem: "Mộc", rating: "Cát", color: JADE, hint: "Vào CK lớn" },
                { name: "Mão", elem: "Mộc", rating: "Hung", color: VERMI, hint: "Tránh đòn bẩy" },
                { name: "Thìn", elem: "Thổ", rating: "Đại cát", color: JADE, hint: "Mở vị thế mới" },
                { name: "Tỵ", elem: "Hỏa", rating: "Bình", color: GOLD, hint: "Hold BTC" },
                { name: "Ngọ", elem: "Hỏa", rating: "Hung", color: VERMI, hint: "Hoãn giao dịch" },
                { name: "Mùi", elem: "Thổ", rating: "Cát", color: JADE, hint: "Tích lũy" },
                { name: "Thân", elem: "Kim", rating: "Bình", color: GOLD, hint: "Theo dõi" },
                { name: "Dậu", elem: "Kim", rating: "Cát", color: JADE, hint: "Bán vàng" },
                { name: "Tuất", elem: "Thổ", rating: "Hung", color: VERMI, hint: "Cắt lỗ sớm" },
                { name: "Hợi", elem: "Thủy", rating: "Cát", color: JADE, hint: "Mua tiền số" },
              ].map((z) => (
                <div key={z.name} className="p-4 lg:p-5 text-center" style={{ background: PAPER_LIGHT }}>
                  <div
                    className="text-[22px] mb-1"
                    style={{ fontFamily: SERIF, fontWeight: 500, color: INK, fontVariationSettings: "'opsz' 144, 'WONK' 1" }}
                  >
                    {z.name}
                  </div>
                  <div className="text-[10px] uppercase tracking-[0.2em] font-mono mb-2" style={{ color: INK3 }}>
                    {z.elem}
                  </div>
                  <div
                    className="inline-block px-2 py-0.5 text-[10px] uppercase tracking-[0.2em] font-bold mb-2"
                    style={{ background: z.color, color: PAPER, fontFamily: MONO }}
                  >
                    {z.rating}
                  </div>
                  <div className="text-[11px] italic leading-tight" style={{ color: INK2, fontFamily: READ }}>
                    {z.hint}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* PHÂN TÍCH + 2 CỘT NGÀNH */}
        <section className="border-b" style={{ borderColor: INK }}>
          <div className="mx-auto max-w-[1320px] px-6 lg:px-10 py-12">
            <div className="grid grid-cols-12 gap-8">
              {/* Phân tích — middle */}
              <div className="col-span-12 lg:col-span-6 lg:border-r-2 lg:pr-8" style={{ borderColor: INK }}>
                <div className="text-[10px] uppercase tracking-[0.3em] font-mono mb-3" style={{ color: VERMI }}>
                  ◇ Bình luận viên cố vấn ◇
                </div>
                <h2
                  style={{
                    fontFamily: SERIF,
                    fontSize: "clamp(28px, 3.4vw, 44px)",
                    fontStyle: "italic",
                    fontWeight: 400,
                    letterSpacing: "-0.02em",
                    color: INK,
                    fontVariationSettings: "'opsz' 144, 'SOFT' 60",
                  }}
                  className="mb-7"
                >
                  Lời người trong cuộc.
                </h2>
                <ul className="space-y-7">
                  {colPhanTich.map((p, i) => (
                    <li key={p.id} className="border-b pb-7 last:border-b-0" style={{ borderColor: INK3 }}>
                      <Link href={`/${p.slug}`} className="block group flex gap-4">
                        <span
                          className="shrink-0 text-[44px] leading-none"
                          style={{ fontFamily: SERIF, color: VERMI, fontStyle: "italic", fontWeight: 400, fontVariationSettings: "'opsz' 144, 'WONK' 1" }}
                        >
                          {String(i + 1).padStart(2, "0")}
                        </span>
                        <div className="flex-1">
                          <div className="text-[10px] uppercase tracking-[0.25em] font-mono mb-1.5" style={{ color: GOLD }}>
                            {p.categories[0]?.name ?? "Phân tích"} · {p.readMinutes} phút
                          </div>
                          <h3
                            className="group-hover:text-[var(--vermi)] transition-colors mb-2"
                            style={{
                              fontFamily: SERIF,
                              fontSize: 22,
                              lineHeight: 1.2,
                              fontWeight: 500,
                              color: INK,
                              ["--vermi" as string]: VERMI,
                            }}
                          >
                            {p.title}
                          </h3>
                          {p.excerpt && (
                            <p className="text-[13px] leading-[1.55] line-clamp-2" style={{ color: INK2, fontFamily: READ, fontStyle: "italic" }}>
                              {p.excerpt}
                            </p>
                          )}
                          <div className="text-[11px] uppercase tracking-[0.2em] font-mono mt-2" style={{ color: INK3 }}>
                            ── {p.author.name}
                          </div>
                        </div>
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>

              {/* Right: 2 stacked sector mini-pages */}
              <div className="col-span-12 lg:col-span-6 space-y-10">
                {/* Tiền số */}
                <div>
                  <div className="flex items-baseline justify-between mb-4 pb-2 border-b-2" style={{ borderColor: INK }}>
                    <h3
                      style={{
                        fontFamily: SERIF,
                        fontSize: 24,
                        fontWeight: 500,
                        fontStyle: "italic",
                        color: INK,
                        fontVariationSettings: "'opsz' 144, 'WONK' 1",
                      }}
                    >
                      Tiền số ◐
                    </h3>
                    <span className="text-[11px] uppercase tracking-[0.2em] font-mono" style={{ color: VERMI }}>
                      Biến động
                    </span>
                  </div>
                  <ul className="space-y-3">
                    {colCrypto.map((p, i) => (
                      <li key={p.id} className={i < colCrypto.length - 1 ? "pb-3 border-b" : ""} style={{ borderColor: INK3 }}>
                        <Link href={`/${p.slug}`} className="flex items-baseline gap-3 group">
                          <span className="text-[10px] tabular-nums uppercase tracking-[0.18em] font-mono w-12" style={{ color: GOLD }}>
                            {fmtDate(p.date)}
                          </span>
                          <span className="flex-1 group-hover:text-[var(--vermi)]" style={{ fontFamily: SERIF, fontSize: 16, fontWeight: 500, color: INK, ["--vermi" as string]: VERMI }}>
                            {p.title}
                          </span>
                          <span className="text-[10px] font-mono shrink-0" style={{ color: INK3 }}>
                            {p.readMinutes}'
                          </span>
                        </Link>
                      </li>
                    ))}
                  </ul>
                </div>

                {/* Vàng - Bạc */}
                <div>
                  <div className="flex items-baseline justify-between mb-4 pb-2 border-b-2" style={{ borderColor: INK }}>
                    <h3
                      style={{
                        fontFamily: SERIF,
                        fontSize: 24,
                        fontWeight: 500,
                        fontStyle: "italic",
                        color: INK,
                        fontVariationSettings: "'opsz' 144, 'WONK' 1",
                      }}
                    >
                      Vàng — Bạc ◑
                    </h3>
                    <span className="text-[11px] uppercase tracking-[0.2em] font-mono" style={{ color: GOLD }}>
                      Bảo toàn
                    </span>
                  </div>
                  <ul className="space-y-3">
                    {colVang.map((p, i) => (
                      <li key={p.id} className={i < colVang.length - 1 ? "pb-3 border-b" : ""} style={{ borderColor: INK3 }}>
                        <Link href={`/${p.slug}`} className="flex items-baseline gap-3 group">
                          <span className="text-[10px] tabular-nums uppercase tracking-[0.18em] font-mono w-12" style={{ color: GOLD }}>
                            {fmtDate(p.date)}
                          </span>
                          <span className="flex-1 group-hover:text-[var(--vermi)]" style={{ fontFamily: SERIF, fontSize: 16, fontWeight: 500, color: INK, ["--vermi" as string]: VERMI }}>
                            {p.title}
                          </span>
                          <span className="text-[10px] font-mono shrink-0" style={{ color: INK3 }}>
                            {p.readMinutes}'
                          </span>
                        </Link>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* COUPLET / PARALLEL VERSE FOOTER LEAD */}
        <section style={{ background: VERMI, color: PAPER }}>
          <div className="mx-auto max-w-[1320px] px-6 lg:px-10 py-14 lg:py-20 text-center">
            <div className="text-[11px] uppercase tracking-[0.4em] font-mono mb-5" style={{ color: GOLD }}>
              ❀ Đối liên năm mới ❀
            </div>
            <div
              className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-3xl mx-auto"
              style={{ fontFamily: SERIF, fontSize: "clamp(20px, 2.4vw, 28px)", fontStyle: "italic", fontWeight: 400, lineHeight: 1.5, fontVariationSettings: "'opsz' 144, 'WONK' 1" }}
            >
              <div className="md:text-right md:border-r md:pr-6 border-double" style={{ borderColor: PAPER }}>
                "Vàng giữ trong két tránh giấc mơ giàu chóng vánh,"
              </div>
              <div className="md:text-left md:pl-6">
                "Tiền chảy theo đầu hiểu không kẻ mạnh chăm chăm."
              </div>
            </div>
            <div className="mt-8 text-[12px] uppercase tracking-[0.3em] font-mono" style={{ color: GOLD }}>
              ── Tài Lộc Báo · Câu đối tổng kết tuần ──
            </div>
          </div>
        </section>

        {/* FOOTER — almanac colophon */}
        <footer className="border-t-[3px] border-double" style={{ background: PAPER_LIGHT, color: INK, borderColor: INK }}>
          <div className="mx-auto max-w-[1320px] px-6 lg:px-10 py-14">
            <div className="grid grid-cols-12 gap-8 mb-10">
              <div className="col-span-12 lg:col-span-5">
                <div
                  style={{
                    fontFamily: SERIF,
                    fontSize: "clamp(40px, 6vw, 80px)",
                    lineHeight: 0.9,
                    letterSpacing: "-0.03em",
                    fontWeight: 500,
                    color: INK,
                    fontVariationSettings: "'opsz' 144, 'SOFT' 60, 'WONK' 1",
                  }}
                >
                  Tài Lộc <span style={{ color: VERMI, fontStyle: "italic" }}>Báo</span>
                </div>
                <p className="mt-4 italic text-[15px] max-w-md" style={{ color: INK2, fontFamily: READ }}>
                  Niên giám tài chính Việt Nam — đọc trước khi xuống tiền, ngó lại khi đã giao dịch.
                </p>
                <div className="mt-5 flex items-center gap-3">
                  <span
                    className="inline-flex items-center justify-center w-12 h-12 text-center"
                    style={{ background: VERMI, color: PAPER, fontFamily: SERIF, fontWeight: 600, fontSize: 11, lineHeight: 1.05, border: `2px double ${PAPER}`, boxShadow: `0 0 0 1px ${VERMI}` }}
                  >
                    TÀI<br/>LỘC
                  </span>
                  <span className="text-[11px] uppercase tracking-[0.25em] font-mono" style={{ color: INK3 }}>
                    ấn ký · {today.getFullYear()}
                  </span>
                </div>
              </div>

              {[
                { title: "Mục lục", items: [["Tin chợ","/category/tin-nong"],["Bình luận","/category/phan-tich"],["Tiền số","/category/crypto"],["Cổ phiếu","/category/chung-khoan"]] },
                { title: "Niên giám", items: [["Tử vi tuần","/category/phan-tich"],["Lịch giao dịch","/category/phan-tich"],["Đối liên","/category/phan-tich"]] },
                { title: "Tòa soạn", items: [["Giới thiệu","/gioi-thieu"],["Liên hệ","/lien-he"],["Bảo mật","/bao-mat"],["Điều khoản","/dieu-khoan"]] },
              ].map((col) => (
                <div key={col.title} className="col-span-6 lg:col-span-2 lg:border-l lg:pl-6" style={{ borderColor: INK3 }}>
                  <div className="text-[11px] uppercase tracking-[0.25em] font-mono mb-3" style={{ color: VERMI }}>
                    {col.title}
                  </div>
                  <ul className="space-y-1.5 text-[14px]" style={{ fontFamily: READ, color: INK2 }}>
                    {col.items.map(([l,h]) => (
                      <li key={h}><Link href={h} className="hover:text-[var(--vermi)]" style={{ ["--vermi" as string]: VERMI }}>{l}</Link></li>
                    ))}
                  </ul>
                </div>
              ))}

              <div className="col-span-12 lg:col-span-1 lg:border-l lg:pl-6" style={{ borderColor: INK3 }}>
                <div className="text-[11px] uppercase tracking-[0.25em] font-mono mb-3" style={{ color: VERMI }}>
                  Liên kết
                </div>
                <ul className="space-y-1.5 text-[13px]" style={{ fontFamily: MONO, color: INK2 }}>
                  <li><a href="https://t.me/finzonenetwork" className="hover:text-[var(--vermi)]" style={{ ["--vermi" as string]: VERMI }}>↗ Telegram</a></li>
                  <li><Link href="/feed.xml" className="hover:text-[var(--vermi)]" style={{ ["--vermi" as string]: VERMI }}>↗ RSS</Link></li>
                  <li><Link href="/cong-dong#newsletter" className="hover:text-[var(--vermi)]" style={{ ["--vermi" as string]: VERMI }}>↗ Bản tin</Link></li>
                </ul>
              </div>
            </div>

            <div className="border-t pt-6 flex flex-wrap items-baseline justify-between gap-4 text-[11px] uppercase tracking-[0.25em] font-mono" style={{ borderColor: INK3, color: INK3 }}>
              <span>© {today.getFullYear()} Finzone · Tài Lộc Báo · Việt Nam</span>
              <span style={{ color: VERMI }}>Năm {lunarYearStem} {lunarYearBranch} · Tháng {lunarMonth}</span>
            </div>
          </div>
        </footer>
      </main>
    </div>
  );
}