"use client";

import { useState } from "react";
import { PROFILE } from "@/data/content";
import { useMountTransition } from "@/hooks/useAnimations";
import Nav from "@/components/Nav";
import Profile from "@/components/Profile";
import Projects from "@/components/Projects";
import Footer from "@/components/Footer";

export default function Home() {
  const [section, setSection] = useState("profile");
  const mounted = useMountTransition();

  return (
    <div style={{ minHeight: "100vh", paddingBottom: 36 }}>
      <div
        style={{
          maxWidth: 880,
          margin: "0 auto",
          padding: "0 24px",
          opacity: mounted ? 1 : 0,
          transform: mounted ? "none" : "translateY(8px)",
          transition: "all 0.5s cubic-bezier(0.16, 1, 0.3, 1)",
        }}
      >
        <header
          style={{
            padding: "24px 0 0",
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
          }}
        >
          <div
            style={{
              fontFamily: "var(--mono)",
              fontSize: 14,
              fontWeight: 700,
              color: "var(--accent)",
              letterSpacing: "-0.02em",
            }}
          >          
          </div>
          
        </header>

        <Nav section={section} setSection={setSection} />

        <main>
          {section === "profile" && <Profile />}
          {section === "projects" && <Projects />}
        </main>
      </div>

      <Footer />
    </div>
  );
}