import type { Metadata } from "next";
import Link from "next/link";
import { BlocksForm } from "@/components/admin/BlocksForm";
import {
  getAboutValues,
  getFaqs,
  getPricingTiers,
  getProcessSteps,
} from "@/lib/cms";

export const metadata: Metadata = {
  title: "Shared blocks",
  robots: { index: false, follow: false },
};

export default async function AdminBlocksPage() {
  const [processSteps, faqs, pricingTiers, aboutValues] = await Promise.all([
    getProcessSteps(),
    getFaqs(),
    getPricingTiers(),
    getAboutValues(),
  ]);

  return (
    <div className="space-y-8">
      <header>
        <Link
          href="/admin"
          className="text-[0.72rem] font-semibold uppercase tracking-[0.16em] text-ink-mute transition-colors hover:text-teal"
        >
          ← Dashboard
        </Link>
        <p className="text-sm font-semibold uppercase tracking-[0.14em] text-coral">
          Content
        </p>
        <h1 className="display-2 mt-2">Shared blocks</h1>
        <p className="mt-2 text-ink-soft">
          Reusable sections that appear across several pages — process steps,
          pricing tiers, values and FAQs.
        </p>
      </header>

      <BlocksForm
        processSteps={processSteps}
        faqs={faqs}
        pricingTiers={pricingTiers}
        aboutValues={aboutValues}
      />
    </div>
  );
}