// App — orchestrates loading screen, nav state, smooth scroll, and all sections.
const { useState: useStateApp, useEffect: useEffectApp, useCallback } = React;

if (window.gsap && window.ScrollTrigger) {
  window.gsap.registerPlugin(window.ScrollTrigger);
}

const PROFILE = {
  name: "Devarsh Patel",
  initials: "DP",
  location: "the United States",
  headline: "AI-driven User Centered Product Designer & Strategist",
  tagline:
    "who brings industrial design thinking to digital products. Currently designing for 12M+ users across the healthcare, finance & entertainment space.",
  email: "devarshpdesigns@gmail.com",
  available: true,
  socials: [
    { label: "LinkedIn", url: "https://www.linkedin.com/in/devarshpatel23" },
    { label: "Instagram", url: "https://www.instagram.com/vibecodewithdevarsh/" },
    { label: "Email", url: "mailto:devarshpdesigns@gmail.com" },
  ],
};

// Nav label -> section id
const NAV_TARGET = { Home: "Home", Work: "Work", About: "Contact", Resume: "Contact", Contact: "Contact" };

function App() {
  const [isLoading] = useStateApp(false);
  const [active, setActive] = useStateApp("Home");

  const scrollToId = useCallback((id) => {
    const el = document.getElementById(id);
    if (!el) return;
    const top = el.getBoundingClientRect().top + window.scrollY - 8;
    window.scrollTo({ top, behavior: "smooth" });
  }, []);

  const onNav = useCallback((label) => {
    if (label === "About") {
      window.location.href = "about/about.html";
      return;
    }
    setActive(label === "Resume" || label === "Contact" ? "Work" : label);
    const id = NAV_TARGET[label] || "Home";
    scrollToId(id);
  }, [scrollToId]);

  // Refresh ScrollTrigger once the loading overlay is gone & layout settles.
  useEffectApp(() => {
    if (isLoading) return;
    const t = setTimeout(() => window.ScrollTrigger && window.ScrollTrigger.refresh(), 200);
    return () => clearTimeout(t);
  }, [isLoading]);

  // Honor an incoming #hash (sub-pages link to index.html#Work / #Home /
  // #Contact). React renders after the browser's native fragment jump, so we
  // scroll once the sections actually exist.
  useEffectApp(() => {
    const id = decodeURIComponent((window.location.hash || "").slice(1));
    if (!id) return;
    if (!["Home", "Work", "Tools", "Contact"].includes(id)) return;
    const t = setTimeout(() => {
      scrollToId(id);
      setActive(id === "Contact" || id === "Tools" ? "Work" : id);
    }, 250);
    return () => clearTimeout(t);
  }, [scrollToId]);

  return (
    <React.Fragment>
      <Navbar active={active} onNav={onNav} email={PROFILE.email} initials={PROFILE.initials} />

      <main>
        <Hero
          name={PROFILE.name}
          location={PROFILE.location}
          headline={PROFILE.headline}
          tagline={PROFILE.tagline}
          onNav={onNav}
          ready={!isLoading}
        />
        <SelectedWorks onViewAll={() => scrollToId("Work")} />
        <Tools />
        <Testimonials />
        <Moodboard />
        <Contact
          email={PROFILE.email}
          name={PROFILE.name}
          socials={PROFILE.socials}
          available={PROFILE.available}
        />
      </main>
      <AskDev />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);