import { useState, useEffect } from "react";
import { Moon, Sun } from "lucide-react";
import { EngineeringImpactCard } from "./components/EngineeringImpactCard";
import "./App.css";

function App() {
  const [dark, setDark] = useState(() => {
    const stored = localStorage.getItem("theme");
    if (stored === "dark" || stored === "light") return stored === "dark";
    return window.matchMedia("(prefers-color-scheme: dark)").matches;
  });

  useEffect(() => {
    const root = document.documentElement;
    if (dark) {
      root.classList.add("dark");
      localStorage.setItem("theme", "dark");
    } else {
      root.classList.remove("dark");
      localStorage.setItem("theme", "light");
    }
  }, [dark]);

  return (
    <main className="min-h-screen bg-background p-6 md:p-8 flex flex-col items-center justify-center relative">
      <button
        type="button"
        onClick={() => setDark((d) => !d)}
        className="fixed top-4 right-4 z-50 p-2.5 rounded-xl border border-border bg-card/80 backdrop-blur-sm text-foreground hover:bg-primary/10 hover:border-primary/30 hover:text-primary transition-all duration-300 shadow-lg"
        aria-label={dark ? "Hellmodus aktivieren" : "Dark Mode aktivieren"}
      >
        {dark ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
      </button>
      <div className="w-full max-w-5xl">
        <EngineeringImpactCard />
      </div>
    </main>
  );
}

export default App;
