import type { Metadata } from "next";

import { PageHero } from "@/components/marketing/page-hero";
import { PlaceholderNotice } from "@/components/marketing/placeholder-notice";

export const metadata: Metadata = {
  title: "Blog",
  description: "krypco news and notes — sample layout until real posts ship.",
};

const SAMPLES = [
  {
    tag: "Sample",
    title: "Why hybrid: private speed with public anchors",
    date: "Layout preview",
    excerpt:
      "A short note on the product thesis. This card is a placeholder — not a published article.",
  },
  {
    tag: "Sample",
    title: "Following a transaction through both layers",
    date: "Layout preview",
    excerpt:
      "How the portal will show private blocks and public anchors side by side. Content TBD.",
  },
] as const;

export default function BlogPage() {
  return (
    <>
      <PageHero
        eyebrow="Blog / News"
        title="Notes from the hybrid network"
        description="Real posts will appear here. Until then, sample cards show the layout only."
      />

      <section className="section-pad">
        <div className="mx-auto max-w-3xl space-y-6 px-5 lg:px-8">
          <PlaceholderNotice>
            Sample entries — not live news. A CMS can replace this list later.
          </PlaceholderNotice>

          <ul className="space-y-4">
            {SAMPLES.map((post) => (
              <li
                key={post.title}
                className="rounded-2xl border border-dashed border-border bg-card/80 p-6 sm:p-8"
              >
                <div className="flex flex-wrap items-center gap-3 text-xs uppercase tracking-[0.12em] text-muted-foreground">
                  <span className="rounded-full bg-muted px-2.5 py-0.5 text-accent-hover">
                    {post.tag}
                  </span>
                  <span>{post.date}</span>
                </div>
                <h2 className="font-display mt-3 text-xl font-semibold tracking-tight">
                  {post.title}
                </h2>
                <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
                  {post.excerpt}
                </p>
              </li>
            ))}
          </ul>
        </div>
      </section>
    </>
  );
}