function App() {
  const [provider, setProvider] = useState("openrouter");
  const [apiKey, setApiKey] = useState("");
  const [testStatus, setTestStatus] = useState(null);

  const ctx = useMemo(() => ({
    provider, setProvider, apiKey, setApiKey, testStatus, setTestStatus,
  }), [provider, apiKey, testStatus]);

  return (
    <APIContext.Provider value={ctx}>
      {/* Floating key status */}
      <KeyStatusPill/>
      <Hero/>
      <Market/>
      <Skills/>
      <Portfolio/>
      <APISetup/>
      <Demo1/>
      <Demo2/>
      <Demo3/>
      <Collab/>
      <Projects/>
      <Own/>
      <Plan/>
      <Closing/>
    </APIContext.Provider>
  );
}

function KeyStatusPill() {
  const { apiKey, provider, testStatus } = useAPI();
  const [show, setShow] = useState(true);
  useEffect(() => {
    const onScroll = () => setShow(window.scrollY > 400);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  if (!show) return null;
  const ok = apiKey && testStatus === "ok";
  const hasKey = apiKey && testStatus !== "ok";
  return (
    <a href="#api-setup"
       className="fixed bottom-5 right-5 z-50 mono text-[11px] uppercase tracking-widest rounded-full px-3.5 py-2 hairline bg-[#FFFDF9]/95 backdrop-blur flex items-center gap-2 shadow-sm hover:bg-paper transition-colors">
      <span className={`w-1.5 h-1.5 rounded-full ${ok ? "bg-teal" : hasKey ? "bg-[#C3572B]" : "bg-muted"}`}/>
      <span className="text-ink2">
        {ok ? `api: connected · ${provider}` : hasKey ? "api: key set · untested" : "api: no key"}
      </span>
    </a>
  );
}

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