src/App.tsx

import { useState } from "react";

import { LLMProvider } from "./hooks/LLMProvider";
import { LandingPage } from "./components/LandingPage";
import { AppShell } from "./components/AppShell";
import { MODEL_CONFIG } from "./model-config";

type Stage = "landing" | "loading" | "ready";

function App() {
  const [stage, setStage] = useState<Stage>("landing");
  const [landingFading, setLandingFading] = useState(false);

  const handleStart = () => {
    setLandingFading(true);
    setTimeout(() => setStage("loading"), 500);
  };

  return (
    <div className="relative h-screen w-screen overflow-hidden" style={{ background: "#050515" }}>
      {/* Cyan/magenta gradient orbs */}
      <div className="pointer-events-none absolute inset-0">
        <div
          className="absolute"
          style={{
            top: "-20%", left: "-10%",
            width: "60vh", height: "60vh",
            background: "radial-gradient(circle, rgba(0,255,255,0.08) 0%, transparent 70%)",
            borderRadius: "50%",
          }}
        />
        <div
          className="absolute"
          style={{
            bottom: "-15%", right: "-10%",
            width: "50vh", height: "50vh",
            background: "radial-gradient(circle, rgba(255,0,255,0.07) 0%, transparent 70%)",
            borderRadius: "50%",
          }}
        />
      </div>

      {/* Subtle grid overlay */}
      <div
        className="pointer-events-none absolute inset-0 opacity-20"
        style={{
          backgroundImage: [
            "repeating-linear-gradient(0deg, transparent, transparent 39.6px, rgba(0,255,255,0.04) 39.6px, rgba(0,255,255,0.04) 40px)",
            "repeating-linear-gradient(90deg, transparent, transparent 39.6px, rgba(0,255,255,0.04) 39.6px, rgba(0,255,255,0.04) 40px)",
          ].join(", "),
        }}
      />

      <div
        className={`absolute inset-0 z-10 transition-all duration-500 ${
          landingFading || stage !== "landing"
            ? "opacity-0 translate-y-4 pointer-events-none"
            : "opacity-100"
        }`}
      >
        <LandingPage onStart={handleStart} />
      </div>

      {(stage === "loading" || stage === "ready") && (
        <LLMProvider
          modelId={MODEL_CONFIG.modelId}
          onReady={() => setStage("ready")}
        >
          <AppShell />
        </LLMProvider>
      )}
    </div>
  );
}

export default App;