import { Deck, type SlideMeta } from "@/components/deck/deck";
import { FeatureSlide } from "@/components/slides/feature-slide";
import { PaperSlide } from "@/components/slides/paper-slide";
import { BlockDivider } from "@/components/slides/block-divider";
import { CenteredThesis } from "@/components/slides/centered-thesis";
import { KpiTrio } from "@/components/slides/kpi-trio";

const SLIDES: SlideMeta[] = [
  { id: "s1", block: "A", title: "Opening", status: "complete" },
  { id: "s2", block: "A", title: "Thesis", status: "complete" },
  { id: "s3", block: "B", title: "Block B divider", status: "complete" },
  { id: "s4", block: "B", title: "KPIs", status: "complete" },
  { id: "s5", block: "B", title: "Closing", status: "complete" },
];

export default function HomePage() {
  const total = SLIDES.length;
  return (
    <main>
      <Deck slides={SLIDES}>
        <FeatureSlide
          number={1}
          total={total}
          eyebrow="OPENING"
          title={<>A short hero phrase.</>}
          body="One sentence framing the deck. Read it aloud — if it doesn't sound deliberate, rewrite."
        />
        <CenteredThesis
          number={2}
          total={total}
          eyebrow="THESIS"
          beforeHighlight="The thing scales not by adding more, but by"
          highlight="lowering granularity"
          afterHighlight="."
          tail="A second sentence to land the implication."
        />
        <BlockDivider
          number={3}
          total={total}
          blockNumber="02"
          eyebrow="NEXT BLOCK"
          title={<>Where it starts to matter.</>}
        />
        <KpiTrio
          number={4}
          total={total}
          eyebrow="THE NUMBERS BEHIND"
          items={[
            { value: "×3.4", caption: "Year-on-year growth." },
            { value: "12", unit: "min", caption: "Median onboarding time." },
            { value: "+21", unit: "%", caption: "Lift vs. control." },
          ]}
        />
        <PaperSlide
          number={5}
          total={total}
          eyebrow="CLOSING"
          title={<>A small ask, framed precisely.</>}
          body="State the next step. One sentence. End."
        />
      </Deck>
    </main>
  );
}