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

export const metadata = { title: "Mockup D · Terminal Live · Preview" };
export const dynamic = "force-dynamic";

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

/**
 * MOCKUP D — Terminal Live.
 * Anti-publication. The site is not a newspaper, it's a live trading desk.
 * Bloomberg Terminal × Polymarket × Perplexity Finance fusion.
 *
 * No hero photo. No big magazine headline. The "hero" is the live state of
 * markets. Articles arrive as a wire feed. Briefing is AI-style. Mono
 * everywhere. Pure black canvas, signal colors.
 */
export default async function MockupDPage() {
  const [
    { posts: feat },
    { posts: latest },
    { posts: phanTich },
    { posts: tinNong },
    { posts: crypto },
    { posts: chungKhoan },
    { posts: vang },
    { posts: forex },
  ] = await Promise.all([
    listPosts({ perPage: 1, featured: true, orderBy: "date", order: "desc" }),
    listPosts({ perPage: 24, orderBy: "date", order: "desc" }),
    listPosts({ perPage: 6, categories: [CAT_IDS.phanTich] }),
    listPosts({ perPage: 6, categories: [CAT_IDS.tinNong] }),
    listPosts({ perPage: 4, categories: [CAT_IDS.crypto] }),
    listPosts({ perPage: 4, categories: [CAT_IDS.chungKhoan] }),
    listPosts({ perPage: 4, categories: [CAT_IDS.vang] }),
    listPosts({ perPage: 4, categories: [CAT_IDS.forex] }),
  ]);

  const briefingPost = feat[0] ?? phanTich[0] ?? latest[0];
  const wirePosts = latest.slice(0, 16);
  const watchPosts = tinNong.slice(0, 6);

  // Mock ticker — would wire to real provider in prod
  const tickers = [
    { sym: "VN-INDEX", val: "1,287.42", chg: "+0.42", pct: "+0.03%", dir: "up" },
    { sym: "VN30", val: "1,338.21", chg: "+4.12", pct: "+0.31%", dir: "up" },
    { sym: "HNX-INDEX", val: "236.84", chg: "-0.71", pct: "-0.30%", dir: "down" },
    { sym: "BTC/USD", val: "68,420", chg: "-852", pct: "-1.24%", dir: "down" },
    { sym: "ETH/USD", val: "3,524", chg: "-30.4", pct: "-0.86%", dir: "down" },
    { sym: "USD/VND", val: "25,420", chg: "+12", pct: "+0.05%", dir: "up" },
    { sym: "DXY", val: "104.82", chg: "+0.31", pct: "+0.30%", dir: "up" },
    { sym: "GOLD-SJC", val: "76.40M", chg: "+0.10M", pct: "+0.13%", dir: "up" },
    { sym: "XAU/USD", val: "2,372.50", chg: "-8.20", pct: "-0.34%", dir: "down" },
    { sym: "BRENT", val: "82.14", chg: "-0.42", pct: "-0.51%", dir: "down" },
    { sym: "WTI", val: "78.21", chg: "-0.38", pct: "-0.48%", dir: "down" },
    { sym: "EUR/USD", val: "1.0842", chg: "-0.0021", pct: "-0.19%", dir: "down" },
  ];

  const sectors = [
    { name: "BANK", chg: "+0.84%", pct: 0.84 },
    { name: "REAL ESTATE", chg: "+1.42%", pct: 1.42 },
    { name: "TECH", chg: "+0.21%", pct: 0.21 },
    { name: "STEEL", chg: "-0.92%", pct: -0.92 },
    { name: "RETAIL", chg: "+0.56%", pct: 0.56 },
    { name: "ENERGY", chg: "-1.21%", pct: -1.21 },
    { name: "CONSUMER", chg: "+0.31%", pct: 0.31 },
    { name: "INDUSTRIAL", chg: "-0.18%", pct: -0.18 },
    { name: "INSURANCE", chg: "+0.72%", pct: 0.72 },
    { name: "TRANSPORT", chg: "-0.45%", pct: -0.45 },
    { name: "MEDIA", chg: "+0.04%", pct: 0.04 },
    { name: "AGRI", chg: "-0.62%", pct: -0.62 },
  ];

  // Helper: format wire-feed timestamp
  const fmtTime = (d: string) =>
    new Date(d).toLocaleString("vi-VN", {
      hour: "2-digit",
      minute: "2-digit",
      day: "2-digit",
      month: "2-digit",
    });

  // Color tokens
  const BG = "#0A0B0E";
  const PANEL = "#0F1115";
  const PANEL2 = "#14161B";
  const LINE = "#1C2128";
  const LINE2 = "#252B36";
  const TEXT = "#E8ECF1";
  const DIM = "#6B7280";
  const DIM2 = "#9CA3AF";
  const GREEN = "#00D67A";
  const RED = "#FF4757";
  const CYAN = "#22D3EE";
  const AMBER = "#FBBF24";
  const MONO = "var(--font-jetbrains-mono)";

  const sectorBg = (pct: number) => {
    const a = Math.min(Math.abs(pct) / 1.5, 1);
    return pct >= 0
      ? `rgba(0,214,122,${0.08 + a * 0.4})`
      : `rgba(255,71,87,${0.08 + a * 0.4})`;
  };

  return (
    <div style={{ background: BG, color: TEXT, minHeight: "100vh", fontFamily: MONO }}>
      <PreviewBar active="d" />

      {/* TICKER TAPE — top */}
      <div
        className="border-b overflow-hidden"
        style={{ background: PANEL, borderColor: LINE }}
      >
        <div className="flex items-center">
          <div
            className="px-4 py-2.5 border-r flex items-center gap-2 shrink-0"
            style={{ borderColor: LINE, background: PANEL2 }}
          >
            <span
              className="inline-block w-1.5 h-1.5 rounded-full"
              style={{ background: GREEN, boxShadow: `0 0 8px ${GREEN}` }}
            />
            <span className="text-[10px] uppercase tracking-[0.25em] font-bold" style={{ color: GREEN }}>
              LIVE
            </span>
          </div>
          <div
            className="flex items-center overflow-x-auto scrollbar-hide whitespace-nowrap py-2.5"
            style={{ scrollbarWidth: "none" }}
          >
            {tickers.map((t, i) => (
              <div
                key={t.sym}
                className="flex items-baseline gap-2 px-5 border-r"
                style={{ borderColor: i === tickers.length - 1 ? "transparent" : LINE }}
              >
                <span className="text-[11px] font-bold tracking-wide" style={{ color: DIM2 }}>
                  {t.sym}
                </span>
                <span className="text-[12px] font-semibold tabular-nums" style={{ color: TEXT }}>
                  {t.val}
                </span>
                <span
                  className="text-[11px] tabular-nums"
                  style={{ color: t.dir === "up" ? GREEN : RED }}
                >
                  {t.dir === "up" ? "▲" : "▼"} {t.pct}
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* HEADER — minimal terminal bar */}
      <header className="border-b" style={{ background: BG, borderColor: LINE }}>
        <div className="mx-auto max-w-[1600px] px-6 py-4 flex items-center justify-between gap-6">
          <div className="flex items-center gap-6">
            <Link href="/" className="flex items-baseline gap-2">
              <span className="text-[20px] font-bold tracking-tight" style={{ color: TEXT, letterSpacing: "-0.04em" }}>
                FINZONE
              </span>
              <span className="text-[10px] uppercase tracking-[0.3em]" style={{ color: GREEN }}>
                /TERMINAL
              </span>
            </Link>
            <span className="hidden md:inline text-[11px]" style={{ color: DIM }}>
              {new Date().toLocaleString("vi-VN", {
                weekday: "long",
                day: "2-digit",
                month: "2-digit",
                year: "numeric",
                hour: "2-digit",
                minute: "2-digit",
              })} ICT
            </span>
          </div>

          {/* Command palette mock */}
          <div
            className="hidden lg:flex items-center gap-3 px-4 py-2 border flex-1 max-w-md"
            style={{ borderColor: LINE2, background: PANEL }}
          >
            <span className="text-[11px]" style={{ color: GREEN }}>{">"}</span>
            <span className="text-[11px] flex-1" style={{ color: DIM2 }}>
              search ticker, article, command...
            </span>
            <kbd
              className="px-1.5 py-0.5 border text-[10px]"
              style={{ borderColor: LINE2, color: DIM, background: PANEL2 }}
            >
              ⌘K
            </kbd>
          </div>

          <div className="flex items-center gap-2 text-[11px] uppercase tracking-[0.18em]">
            {[
              ["BRIEF", "/category/phan-tich"],
              ["WIRE", "/category/tin-nong"],
              ["DEEP", "/category/phan-tich"],
              ["LIVE", "/category/crypto"],
            ].map(([l, h]) => (
              <Link
                key={l}
                href={h!}
                className="px-3 py-1.5 border hover:border-current transition"
                style={{ borderColor: LINE2, color: DIM2 }}
              >
                {l}
              </Link>
            ))}
          </div>
        </div>
      </header>

      {/* PRIMARY DESK — 3-pane workspace */}
      <main className="mx-auto max-w-[1600px] px-6 py-6">
        <div className="grid grid-cols-12 gap-4">

          {/* LEFT: AI BRIEFING + PHAN TICH WIRE — 8 cols */}
          <div className="col-span-12 lg:col-span-8 space-y-4">

            {/* AI BRIEFING CARD */}
            {briefingPost && (
              <div
                className="border p-6 lg:p-8 relative overflow-hidden"
                style={{ background: PANEL, borderColor: LINE }}
              >
                {/* corner brackets */}
                <span className="absolute top-3 left-3 w-3 h-3 border-t border-l" style={{ borderColor: GREEN }} />
                <span className="absolute top-3 right-3 w-3 h-3 border-t border-r" style={{ borderColor: GREEN }} />
                <span className="absolute bottom-3 left-3 w-3 h-3 border-b border-l" style={{ borderColor: GREEN }} />
                <span className="absolute bottom-3 right-3 w-3 h-3 border-b border-r" style={{ borderColor: GREEN }} />

                <div className="flex items-center gap-3 mb-5">
                  <span
                    className="inline-flex items-center gap-2 px-2.5 py-1 text-[10px] uppercase tracking-[0.25em] font-bold"
                    style={{ background: GREEN, color: BG }}
                  >
                    AI BRIEFING
                  </span>
                  <span className="text-[10px] tracking-wider" style={{ color: DIM }}>
                    GENERATED · {fmtTime(briefingPost.date)} ICT
                  </span>
                  <span className="ml-auto flex items-center gap-1.5">
                    <span className="inline-block w-1 h-1 rounded-full animate-pulse" style={{ background: GREEN }} />
                    <span className="text-[10px]" style={{ color: GREEN }}>STREAMING</span>
                  </span>
                </div>

                <div className="text-[11px] uppercase tracking-[0.3em] mb-4" style={{ color: DIM2 }}>
                  Sáng nay thị trường — tóm tắt từ {wirePosts.length} bài
                </div>

                <h1
                  className="mb-5"
                  style={{
                    fontFamily: "var(--font-fraunces)",
                    fontSize: "clamp(28px, 3.6vw, 46px)",
                    lineHeight: 1.1,
                    fontWeight: 500,
                    letterSpacing: "-0.025em",
                    color: TEXT,
                  }}
                >
                  {briefingPost.title}
                </h1>

                {briefingPost.excerpt && (
                  <p
                    className="text-[16px] leading-[1.7] mb-6"
                    style={{ color: "#C5CBD3", fontFamily: "var(--font-newsreader)" }}
                  >
                    {briefingPost.excerpt}
                  </p>
                )}

                {/* Cited sources strip */}
                <div className="border-t pt-4 mb-5" style={{ borderColor: LINE2 }}>
                  <div className="text-[10px] uppercase tracking-[0.25em] mb-3" style={{ color: DIM }}>
                    Cited sources
                  </div>
                  <div className="flex flex-wrap gap-2">
                    {phanTich.slice(0, 5).map((p, i) => (
                      <Link
                        key={p.id}
                        href={`/${p.slug}`}
                        className="inline-flex items-center gap-1.5 px-2.5 py-1 border text-[11px] hover:border-current transition"
                        style={{ borderColor: LINE2, color: DIM2 }}
                      >
                        <span className="font-bold tabular-nums" style={{ color: CYAN }}>
                          [{String(i + 1).padStart(2, "0")}]
                        </span>
                        <span className="max-w-[200px] truncate">{p.title}</span>
                      </Link>
                    ))}
                  </div>
                </div>

                {/* Suggested follow-ups */}
                <div className="flex flex-wrap gap-2">
                  {[
                    "Vàng SJC tuần này có gì?",
                    "Fed họp khi nào?",
                    "VN-Index breakdown theo ngành",
                    "BTC test support 67k?",
                  ].map((q) => (
                    <button
                      key={q}
                      className="inline-flex items-center gap-2 px-3 py-2 border text-[12px] hover:border-current transition group"
                      style={{ borderColor: LINE2, background: PANEL2, color: TEXT }}
                    >
                      <span style={{ color: GREEN }}>→</span>
                      <span>{q}</span>
                    </button>
                  ))}
                </div>
              </div>
            )}

            {/* SECTOR HEATMAP */}
            <div className="border" style={{ background: PANEL, borderColor: LINE }}>
              <div
                className="flex items-center justify-between px-4 py-3 border-b"
                style={{ borderColor: LINE, background: PANEL2 }}
              >
                <div className="flex items-center gap-3">
                  <span className="text-[11px] font-bold uppercase tracking-[0.2em]" style={{ color: TEXT }}>
                    Sector heatmap · VN
                  </span>
                  <span className="text-[10px]" style={{ color: DIM }}>
                    Last update: {new Date().toLocaleTimeString("vi-VN", { hour: "2-digit", minute: "2-digit" })}
                  </span>
                </div>
                <div className="flex items-center gap-3 text-[10px]" style={{ color: DIM }}>
                  <span className="flex items-center gap-1.5">
                    <span className="inline-block w-2.5 h-2.5" style={{ background: "rgba(255,71,87,0.4)" }} />
                    BEAR
                  </span>
                  <span className="flex items-center gap-1.5">
                    <span className="inline-block w-2.5 h-2.5" style={{ background: "rgba(0,214,122,0.4)" }} />
                    BULL
                  </span>
                </div>
              </div>
              <div className="grid grid-cols-3 lg:grid-cols-6 gap-px" style={{ background: LINE }}>
                {sectors.map((s) => (
                  <div
                    key={s.name}
                    className="px-3 py-4 flex flex-col justify-between min-h-[88px]"
                    style={{ background: sectorBg(s.pct) }}
                  >
                    <div className="text-[10px] font-bold tracking-wider" style={{ color: TEXT }}>
                      {s.name}
                    </div>
                    <div
                      className="text-[16px] font-bold tabular-nums mt-2"
                      style={{ color: s.pct >= 0 ? GREEN : RED }}
                    >
                      {s.chg}
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* WIRE FEED — chronological log */}
            <div className="border" style={{ background: PANEL, borderColor: LINE }}>
              <div
                className="flex items-center justify-between px-4 py-3 border-b"
                style={{ borderColor: LINE, background: PANEL2 }}
              >
                <div className="flex items-center gap-3">
                  <span
                    className="inline-block w-1.5 h-1.5 rounded-full animate-pulse"
                    style={{ background: GREEN }}
                  />
                  <span className="text-[11px] font-bold uppercase tracking-[0.2em]">
                    Wire feed
                  </span>
                  <span className="text-[10px]" style={{ color: DIM }}>
                    {wirePosts.length} entries · live
                  </span>
                </div>
                <div className="flex items-center gap-3 text-[10px]" style={{ color: DIM }}>
                  <span>FILTER:</span>
                  <span style={{ color: TEXT }}>ALL</span>
                </div>
              </div>
              <div>
                {wirePosts.map((p, i) => {
                  const cat = (p.categories[0]?.name ?? "TIN").toUpperCase();
                  const catColor =
                    cat.includes("CRYPTO") ? AMBER :
                    cat.includes("PHÂN") ? CYAN :
                    cat.includes("VÀNG") ? AMBER :
                    cat.includes("CHỨNG") ? GREEN :
                    cat.includes("FOREX") ? CYAN :
                    GREEN;
                  return (
                    <Link
                      key={p.id}
                      href={`/${p.slug}`}
                      className="grid grid-cols-12 gap-3 px-4 py-2.5 hover:bg-[var(--hover)] group items-baseline border-b transition"
                      style={{
                        borderColor: i === wirePosts.length - 1 ? "transparent" : LINE,
                        ["--hover" as string]: "rgba(255,255,255,0.025)",
                      }}
                    >
                      <span className="col-span-2 text-[11px] tabular-nums" style={{ color: DIM }}>
                        {fmtTime(p.date)}
                      </span>
                      <span
                        className="col-span-2 text-[10px] font-bold uppercase tracking-wider"
                        style={{ color: catColor }}
                      >
                        [{cat}]
                      </span>
                      <span
                        className="col-span-7 text-[13px] truncate group-hover:underline underline-offset-2"
                        style={{ color: TEXT }}
                      >
                        {p.title}
                      </span>
                      <span className="col-span-1 text-right text-[10px]" style={{ color: DIM }}>
                        {p.readMinutes}'
                      </span>
                    </Link>
                  );
                })}
              </div>
              <div
                className="px-4 py-3 border-t flex justify-between items-center text-[11px]"
                style={{ borderColor: LINE, background: PANEL2 }}
              >
                <span style={{ color: DIM }}>Showing {wirePosts.length} most recent</span>
                <Link href="/category/tin-nong" className="font-bold" style={{ color: GREEN }}>
                  load more →
                </Link>
              </div>
            </div>
          </div>

          {/* RIGHT: WATCHLIST + DEEP DIVE STACK — 4 cols */}
          <aside className="col-span-12 lg:col-span-4 space-y-4">

            {/* WATCHLIST */}
            <div className="border" style={{ background: PANEL, borderColor: LINE }}>
              <div
                className="flex items-center justify-between px-4 py-3 border-b"
                style={{ borderColor: LINE, background: PANEL2 }}
              >
                <span className="text-[11px] font-bold uppercase tracking-[0.2em]">
                  Watchlist
                </span>
                <span className="text-[10px]" style={{ color: DIM }}>VN · {tickers.length}</span>
              </div>
              <div>
                {tickers.slice(0, 8).map((t, i) => (
                  <div
                    key={t.sym}
                    className={`flex items-baseline justify-between px-4 py-2.5 ${i < 7 ? "border-b" : ""} hover:bg-white/[0.02] transition`}
                    style={{ borderColor: LINE }}
                  >
                    <div className="flex flex-col">
                      <span className="text-[11px] font-bold tracking-wide">{t.sym}</span>
                      <span className="text-[9px]" style={{ color: DIM }}>
                        {t.sym.includes("/") ? "FX/CRYPTO" : t.sym.includes("VN") ? "INDEX" : "COMMODITY"}
                      </span>
                    </div>
                    <div className="text-right">
                      <div className="text-[13px] font-semibold tabular-nums" style={{ color: TEXT }}>
                        {t.val}
                      </div>
                      <div
                        className="text-[10px] tabular-nums"
                        style={{ color: t.dir === "up" ? GREEN : RED }}
                      >
                        {t.dir === "up" ? "▲" : "▼"} {t.pct}
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* WATCH POSTS — pinned alerts */}
            {watchPosts.length > 0 && (
              <div className="border" style={{ background: PANEL, borderColor: LINE }}>
                <div
                  className="flex items-center justify-between px-4 py-3 border-b"
                  style={{ borderColor: LINE, background: PANEL2 }}
                >
                  <div className="flex items-center gap-2">
                    <span style={{ color: AMBER }}>⚠</span>
                    <span className="text-[11px] font-bold uppercase tracking-[0.2em]">
                      Đáng chú ý
                    </span>
                  </div>
                  <span className="text-[10px]" style={{ color: DIM }}>{watchPosts.length}</span>
                </div>
                <ul>
                  {watchPosts.map((p, i) => (
                    <li key={p.id} className={i < watchPosts.length - 1 ? "border-b" : ""} style={{ borderColor: LINE }}>
                      <Link href={`/${p.slug}`} className="block px-4 py-3 group hover:bg-white/[0.02] transition">
                        <div className="flex items-center gap-2 mb-1.5">
                          <span
                            className="text-[9px] uppercase font-bold tracking-wider tabular-nums"
                            style={{ color: AMBER }}
                          >
                            #{String(i + 1).padStart(2, "0")}
                          </span>
                          <span className="text-[9px] uppercase tracking-wider" style={{ color: DIM }}>
                            {p.categories[0]?.name ?? "Tin"}
                          </span>
                          <span
                            className="ml-auto text-[9px] tabular-nums"
                            style={{ color: DIM }}
                          >
                            {fmtTime(p.date)}
                          </span>
                        </div>
                        <h3
                          className="text-[13px] leading-[1.35] group-hover:text-[var(--g)] transition"
                          style={{ color: TEXT, ["--g" as string]: GREEN }}
                        >
                          {p.title}
                        </h3>
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>
            )}

            {/* DEEP DIVE — long-reads */}
            <div className="border" style={{ background: PANEL, borderColor: LINE }}>
              <div
                className="flex items-center justify-between px-4 py-3 border-b"
                style={{ borderColor: LINE, background: PANEL2 }}
              >
                <span className="text-[11px] font-bold uppercase tracking-[0.2em]">
                  Deep dive
                </span>
                <span className="text-[10px]" style={{ color: CYAN }}>LONG · 10+ MIN</span>
              </div>
              <ul>
                {phanTich.slice(0, 4).map((p, i) => (
                  <li key={p.id} className={i < 3 ? "border-b" : ""} style={{ borderColor: LINE }}>
                    <Link href={`/${p.slug}`} className="block px-4 py-3.5 group hover:bg-white/[0.02] transition">
                      <div
                        className="text-[28px] font-bold tabular-nums leading-none mb-2"
                        style={{ color: CYAN, fontFamily: MONO }}
                      >
                        {String(i + 1).padStart(2, "0")}
                      </div>
                      <h3 className="text-[14px] leading-[1.3] mb-1.5" style={{ color: TEXT }}>
                        {p.title}
                      </h3>
                      <div className="flex items-center gap-2 text-[10px]" style={{ color: DIM }}>
                        <span>{p.readMinutes} MIN</span>
                        <span>·</span>
                        <span className="uppercase">{p.author.name}</span>
                      </div>
                    </Link>
                  </li>
                ))}
              </ul>
            </div>

            {/* TERMINAL HINT */}
            <div
              className="border p-4"
              style={{ background: PANEL2, borderColor: LINE }}
            >
              <div className="flex items-center gap-2 mb-2">
                <span style={{ color: GREEN }}>$</span>
                <span className="text-[10px] uppercase tracking-[0.2em]" style={{ color: DIM2 }}>
                  Keyboard shortcuts
                </span>
              </div>
              <ul className="space-y-1.5 text-[11px]" style={{ color: DIM2 }}>
                {[
                  ["⌘ K", "command palette"],
                  ["⌘ /", "ask AI"],
                  ["G W", "wire feed"],
                  ["G B", "briefing"],
                  ["G D", "deep dive"],
                ].map(([k, d]) => (
                  <li key={k} className="flex items-center justify-between">
                    <kbd
                      className="px-2 py-0.5 border tabular-nums"
                      style={{ borderColor: LINE2, color: TEXT, background: BG }}
                    >
                      {k}
                    </kbd>
                    <span>{d}</span>
                  </li>
                ))}
              </ul>
            </div>
          </aside>
        </div>

        {/* MARKET SECTIONS — terminal-style category panes */}
        <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-4 mt-4">
          {[
            { title: "CRYPTO", posts: crypto, color: AMBER, href: "/category/crypto" },
            { title: "CHỨNG KHOÁN", posts: chungKhoan, color: GREEN, href: "/category/chung-khoan" },
            { title: "VÀNG", posts: vang, color: AMBER, href: "/category/vang" },
            { title: "FOREX", posts: forex, color: CYAN, href: "/category/forex" },
          ].map((col) => (
            <div key={col.title} className="border" style={{ background: PANEL, borderColor: LINE }}>
              <div
                className="flex items-center justify-between px-4 py-3 border-b"
                style={{ borderColor: LINE, background: PANEL2 }}
              >
                <div className="flex items-center gap-2">
                  <span className="inline-block w-2 h-2" style={{ background: col.color }} />
                  <span className="text-[11px] font-bold uppercase tracking-[0.2em]">
                    {col.title}
                  </span>
                </div>
                <Link href={col.href} className="text-[10px]" style={{ color: col.color }}>
                  →
                </Link>
              </div>
              <ul>
                {col.posts.slice(0, 4).map((p, i) => (
                  <li key={p.id} className={i < 3 ? "border-b" : ""} style={{ borderColor: LINE }}>
                    <Link href={`/${p.slug}`} className="block px-4 py-3 group hover:bg-white/[0.02] transition">
                      <div className="flex items-baseline gap-2 mb-1.5">
                        <span
                          className="text-[10px] tabular-nums font-bold"
                          style={{ color: col.color }}
                        >
                          {String(i + 1).padStart(2, "0")}
                        </span>
                        <span className="text-[9px] tabular-nums" style={{ color: DIM }}>
                          {fmtTime(p.date)}
                        </span>
                      </div>
                      <h3 className="text-[13px] leading-[1.35]" style={{ color: TEXT }}>
                        {p.title}
                      </h3>
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </main>

      {/* TERMINAL FOOTER — status bar */}
      <footer className="border-t mt-6" style={{ background: PANEL, borderColor: LINE }}>
        <div className="mx-auto max-w-[1600px] px-6 py-2.5 flex items-center justify-between gap-6 flex-wrap text-[10px]" style={{ color: DIM2 }}>
          <div className="flex items-center gap-4">
            <span className="flex items-center gap-1.5">
              <span className="inline-block w-1.5 h-1.5 rounded-full" style={{ background: GREEN, boxShadow: `0 0 6px ${GREEN}` }} />
              <span style={{ color: GREEN }}>CONNECTED</span>
            </span>
            <span>UPLINK 18ms</span>
            <span>QUOTES: REUTERS · BLOOMBERG · HOSE · HNX</span>
          </div>
          <div className="flex items-center gap-4">
            <span>FINZONE/TERMINAL v0.2.0</span>
            <span>· © 2026 FINZONE NETWORK · VIETNAM</span>
          </div>
        </div>
      </footer>
    </div>
  );
}