import type { Metadata } from "next";

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

export const metadata: Metadata = {
  title: "Roadmap",
  description: "krypco delivery phases — honest placeholders, no fake ship dates.",
};

const PHASES = [
  {
    phase: "Phase 0–1",
    title: "Portal skeleton & brand site",
    status: "In progress",
    body: "Monorepo, design system, marketing site, portal shell.",
  },
  {
    phase: "Phase 2",
    title: "Live explorer data",
    status: "Next",
    body: "Indexer-fed transactions and blocks; hybrid path visualization.",
  },
  {
    phase: "Phase 3+",
    title: "Auth, services, chain depth",
    status: "Later",
    body: "Briven Auth, richer services catalog, production chain integration.",
  },
] as const;

export default function RoadmapPage() {
  return (
    <>
      <PageHero
        eyebrow="Roadmap"
        title="Build in the open — without fake calendars"
        description="Phases describe intent. Dates ship when they are real."
      />

      <section className="section-pad">
        <div className="mx-auto max-w-3xl space-y-6 px-5 lg:px-8">
          <PlaceholderNotice>
            No invented launch dates. Status labels are directional only.
          </PlaceholderNotice>

          <ol className="space-y-4">
            {PHASES.map((p) => (
              <li
                key={p.phase}
                className="rounded-2xl border border-border bg-card p-6 sm:p-8"
              >
                <div className="flex flex-wrap items-baseline justify-between gap-2">
                  <p className="font-mono text-xs tracking-wider text-muted-foreground">
                    {p.phase}
                  </p>
                  <p className="text-xs font-medium uppercase tracking-[0.12em] text-accent-hover">
                    {p.status}
                  </p>
                </div>
                <h2 className="font-display mt-2 text-xl font-semibold tracking-tight">
                  {p.title}
                </h2>
                <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
                  {p.body}
                </p>
              </li>
            ))}
          </ol>
        </div>
      </section>
    </>
  );
}