import type { SectionRecord } from '$entities/Section';
import { getCollection } from '$shared/api';
import type { NavItem } from '$widgets/Navigation';
import { MobileNav, SidebarNav } from '$widgets/Navigation';
import { SectionFactory } from '$widgets/SectionFactory';
import { SectionsAccordion } from '$widgets/SectionsAccordion';

/**
 * Portfolio home page.
 *
 * Fetches all sections at build time (SSG). Renders a fixed sidebar with
 * section navigation and a scrollable main column with accordion sections.
 */
export default async function Home() {
  const { items: sections } = await getCollection<SectionRecord>('sections', {
    sort: 'order',
  });

  const navItems: NavItem[] = sections.map((s) => ({
    id: s.slug,
    label: s.title,
    number: s.number,
  }));

  return (
    <div className="min-h-screen lg:flex">
      <SidebarNav items={navItems} />
      <main className="flex-1 lg:ml-[33.333%] px-8 py-12 lg:py-16 lg:px-16">
        <MobileNav items={navItems} />
        <SectionsAccordion sections={sections}>
          {sections.map((s) => (
            <SectionFactory key={s.slug} slug={s.slug} />
          ))}
        </SectionsAccordion>
      </main>
    </div>
  );
}