---
import Layout from '@/layouts/main.astro';
import { ParallaxBackground } from '@/components/ParallaxBackground';
import { FloatingHeader, type NavItem } from '@/components/FloatingHeader';
import HeroSection from '@/components/HeroSection.astro';
import BooksSection from '@/components/BooksSection.astro';
import SectionDivider from '@/components/SectionDivider.astro';
import StoriesSection from '@/components/StoriesSection.astro';
import { StickyMapSection } from '@/components/StickyMapSection';
import CharactersSection from '@/components/CharactersSection.astro';
import SupportSection from '@/components/SupportSection.astro';
import Footer from '@/components/Footer.astro';

const navItems: NavItem[] = [
  {
    label: "Books",
    href: "#books",
    hasDropdown: true,
    dropdownItems: [
      { label: "The Dreamer and the Marked", href: "#book-1" },
      { label: "The Curse of Orias", href: "#book-2" },
      { label: "Book Three (Coming Soon)", href: "#book-3" },
    ],
  },
  {
    label: "Short Writing",
    href: "#stories",
    hasDropdown: true,
    dropdownItems: [
      { label: "I Am Not Orias", href: "#story-1" },
      { label: "The Stars Are Drowning", href: "#story-2" },
    ],
  },
  { label: "Art", href: "#art" },
  { label: "About & Contact", href: "#about" },
];
---

<Layout>
  <div class="min-h-screen text-stone-100 relative">
    <ParallaxBackground client:load />
    <FloatingHeader client:load title="Airic Fenn" subtitle="You've Reached the Void" navItems={navItems} />

    <HeroSection />
    <BooksSection />
    <SectionDivider />
    <StoriesSection />
    <SectionDivider />

    <section id="map">
      <StickyMapSection client:visible />
    </section>

    <SectionDivider />
    <CharactersSection />
    <SectionDivider />

    <section class="py-24 px-6">
      <SupportSection />
    </section>

    <Footer />
  </div>
</Layout>
