import SideNav, { NavSection } from "@/components/layout/SideNav";
import {
  Intro,
  TheWhy,
  TheProblem,
  TheShift,
  MeetLyts,
  OneDay,
  Feelings,
  Difference,
  TheLoop,
} from "@/components/story/SectionsA";
import {
  ForYou,
  ForBusiness,
  WhyNow,
  HowItWorks,
  OldVsNew,
  TheVision,
  OurBelief,
  ThePromise,
} from "@/components/story/SectionsB";

const sections: NavSection[] = [
  { id: "intro", label: "Intro" },
  { id: "the-why", label: "The Why" },
  { id: "the-problem", label: "The Problem" },
  { id: "the-shift", label: "The Shift" },
  { id: "lyts", label: "Meet LYTs" },
  { id: "one-day", label: "One Day" },
  { id: "feelings", label: "Feelings" },
  { id: "difference", label: "Difference" },
  { id: "the-loop", label: "The Loop" },
  { id: "for-you", label: "For You" },
  { id: "for-business", label: "For Business" },
  { id: "why-now", label: "Why Now" },
  { id: "how-it-works", label: "How It Works" },
  { id: "old-vs-new", label: "Old vs New" },
  { id: "the-vision", label: "The Vision" },
  { id: "our-belief", label: "Our Belief" },
  { id: "the-promise", label: "The Promise" },
];

export default function Home() {
  return (
    <main className="relative w-full">
      <SideNav sections={sections} />
      <Intro />
      <TheWhy />
      <TheProblem />
      <TheShift />
      <MeetLyts />
      <OneDay />
      <Feelings />
      <Difference />
      <TheLoop />
      <ForYou />
      <ForBusiness />
      <WhyNow />
      <HowItWorks />
      <OldVsNew />
      <TheVision />
      <OurBelief />
      <ThePromise />
    </main>
  );
}
