import type { Metadata } from "next";
import messages from "../../../messages/en/index";
import { getTranslation } from "../../../lib/i18n/getTranslation";
import { routeMetadata } from "../../../lib/siteMetadata";
import CenteredHeader from "../../components/sections/CenteredHeader";
import History from "../../components/sections/History";
import ParticipantSelection from "../../components/sections/ParticipantSelection";
import FourQuestions from "../../components/sections/FourQuestions";
import RebuildProcess from "../../components/sections/RebuildProcess";
import NarrativeBlock from "../../components/sections/NarrativeBlock";
import YourTurn from "../../components/sections/YourTurn";
import Credits from "../../components/sections/Credits";
import QuoteBlock from "../../components/sections/QuoteBlock";
import AskOrganizer from "../../components/sections/AskOrganizer";

export const metadata: Metadata = routeMetadata("/about", {
  title: messages.metadata.about.title,
  description: messages.metadata.about.description,
});

export default function AboutPage() {
  const t = (key: string) => getTranslation(messages, key);
  const page = messages.pages.about;

  return (
    <div className="min-h-screen bg-black">
      <CenteredHeader />
      <QuoteBlock
        variant="statement"
        id="about-opening-statement"
        statementStacked
        quote={page.openingStatement.paragraph1}
        quoteSecondary={page.openingStatement.paragraph2}
      />
      <History />
      <ParticipantSelection />
      <FourQuestions />
      <RebuildProcess />
      <NarrativeBlock />
      <YourTurn />
      <Credits />
      <section className="bg-black">
        <AskOrganizer
          title={t("pages.home.askOrganizer.title")}
          subtitle={t("pages.home.askOrganizer.subtitle")}
          buttonText={t("pages.home.askOrganizer.buttonText")}
        />
      </section>
    </div>
  );
}