import { Navbar } from "@/shared/components/navbar";
import { Footer } from "@/shared/components/footer";
import { WaveDivider } from "@/shared/components/wave-divider";
import { HeroSection } from "@/features/hero/hero-section";
import { ExperienceSection } from "@/features/experience/experience-section";
import { TechStackSection } from "@/features/skills/tech-stack-section";
import { ProjectsSection } from "@/features/projects/projects-section";
import { ContactSection } from "@/features/messages/contact-section";
import { prisma } from "@/core/db/prisma";

export default async function HomePage() {
  const publishedProjects = await prisma.project.findMany({
    where: { isPublished: true },
    orderBy: { createdAt: "desc" }
  });

  return (
    <>
      <Navbar />
      <main className="flex-1">
        <HeroSection />

        {/* Hero → Experience */}
        <ExperienceSection />

        {/* Experience → TechStack (white/dark → muted tint) */}
        <div className="bg-background">
          <WaveDivider fill="var(--muted)" className="opacity-30" />
        </div>
        <TechStackSection />

        {/* TechStack → Projects (muted tint → white/dark) */}
        <div className="bg-muted/30">
          <WaveDivider fill="var(--background)" />
        </div>
        <ProjectsSection initialProjects={publishedProjects} />

        {/* Projects → Contact (white/dark → muted tint) */}
        <div className="bg-background">
          <WaveDivider fill="var(--muted)" className="opacity-30" />
        </div>
        <ContactSection />
      </main>
      <Footer />
    </>
  );
}
