import { createFileRoute } from "@tanstack/react-router";
import { Toaster } from "sonner";
import { useScrollReveal } from "@/hooks/use-scroll-reveal";
import { SiteNav } from "@/components/site/SiteNav";
import { Hero } from "@/components/site/Hero";
import { Divider } from "@/components/site/Divider";
import { About } from "@/components/site/About";
import { BookSection } from "@/components/site/BookSection";
import { Pillars } from "@/components/site/Pillars";
import { Store } from "@/components/site/Store";
import { Bio } from "@/components/site/Bio";
import { Connect } from "@/components/site/Connect";
import { SiteFooter } from "@/components/site/SiteFooter";

export const Route = createFileRoute("/")({
  head: () => ({
    meta: [
      { title: "The Sylver Voice | Faith isn't a whisper. It's a verse." },
      {
        name: "description",
        content:
          "The Sylver Voice — spiritually grounded poetry and prophetic words by Tshepo Matlheketlha. That Cloud Has a Sylver Lining.",
      },
      {
        property: "og:title",
        content: "The Sylver Voice | Faith isn't a whisper. It's a verse.",
      },
      {
        property: "og:description",
        content:
          "Spiritually grounded poetry and prophetic words by Tshepo Matlheketlha.",
      },
      { property: "og:type", content: "website" },
    ],
  }),
  component: Index,
});

function Index() {
  useScrollReveal();

  return (
    <div className="min-h-screen bg-charcoal">
      <SiteNav />
      <Hero />
      <Divider label="Ag 47" />
      <About />
      <Divider label="#TheSylverVoice" />
      <BookSection />
      <Pillars />
      <Store />
      <Bio />
      <Connect />
      <SiteFooter />
      <Toaster
        position="bottom-right"
        toastOptions={{
          style: {
            background: "#2a2a2a",
            border: "1px solid rgba(212,175,55,0.3)",
            color: "#e8e8e8",
          },
        }}
      />
    </div>
  );
}