"use client";

import { useState } from "react";
import { useMountTransition } from "@/hooks/useAnimations";
import Nav from "@/components/Nav";
import Profile from "@/components/Profile";
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={"profile"} />
        <main>
        <Profile />
        </main>
      </div>

      <Footer />
    </div>
  );
}
