/* App entry */
const { useState: useStateApp, useEffect: useEffectApp } = React;

function App() {
  const [theme, setTheme] = useStateApp(() => {
    const saved = localStorage.getItem("theme");
    return saved || "dark";
  });
  const [lang, setLang] = useStateApp(() => {
    return localStorage.getItem("lang") || "de";
  });
  const [cmdOpen, setCmdOpen] = useStateApp(false);

  useEffectApp(() => {
    document.documentElement.setAttribute("data-theme", theme);
    localStorage.setItem("theme", theme);
  }, [theme]);

  useEffectApp(() => {
    document.documentElement.setAttribute("lang", lang === "de" ? "de" : "en");
    localStorage.setItem("lang", lang);
  }, [lang]);

  const toggleTheme = () => setTheme((t) => (t === "dark" ? "light" : "dark"));
  const toggleLang = () => setLang((l) => (l === "en" ? "de" : "en"));
  window.__toggleTheme = toggleTheme;
  window.__toggleLang = toggleLang;

  // Easter egg
  useEffectApp(() => {
    if (window.__eggDone) return;
    window.__eggDone = true;
    const css1 = "color: oklch(0.88 0.18 130); font-family: 'JetBrains Mono', monospace; font-size: 13px;";
    const css2 = "color: #888; font-family: 'JetBrains Mono', monospace; font-size: 12px;";
    const css3 = "color: oklch(0.88 0.18 130); font-weight: bold; font-family: 'JetBrains Mono', monospace; font-size: 14px;";
    const banner = `
%c
  ███╗   ███╗ █████╗ ██╗   ██╗██╗   ██╗██████╗
  ████╗ ████║██╔══██╗╚██╗ ██╔╝██║   ██║██╔══██╗
  ██╔████╔██║███████║ ╚████╔╝ ██║   ██║██████╔╝
  ██║╚██╔╝██║██╔══██║  ╚██╔╝  ██║   ██║██╔══██╗
  ██║ ╚═╝ ██║██║  ██║   ██║   ╚██████╔╝██║  ██║
  ╚═╝     ╚═╝╚═╝  ╚═╝   ╚═╝    ╚═════╝ ╚═╝  ╚═╝
`;
    console.log(banner, css1);
    console.log("%c→ you opened the console. respect.", css3);
    console.log("%c", "");
    console.log("%cI'm Mayur — full-stack engineer, 12+ years.", css1);
    console.log("%cIf you're a senior engineer or designer reading this, you're exactly the person I want to talk to.", css2);
    console.log("%c", "");
    console.log("%c$ contact()", css1);
    console.log("%c  → hello@hireadev.tech", css2);
    console.log("%c  → github.com/mayur-champaneria", css2);
    console.log("%c  → linkedin.com/in/mayur-champaneria", css2);
    console.log("%c", "");
    console.log("%c$ secrets()", css1);
    console.log("%c  → press ⌘K to open the command palette.", css2);
    console.log("%c  → type 'theme' to switch light/dark.", css2);
    console.log("%c  → type 'lang' to switch EN/DE.", css2);
    console.log("%c  → run window.hire() to get a fast-track intro.", css2);
    console.log("%c", "");

    window.hire = () => {
      console.log("%c[ FAST TRACK ENABLED ]", css3);
      console.log("%cdrafting an email for you...", css2);
      setTimeout(() => {
        window.location.href = "mailto:hello@hireadev.tech?subject=Saw%20your%20console%20-%20let's%20talk&body=Hi%20Mayur%2C%0A%0AI%20found%20your%20portfolio%20and%20opened%20the%20console.%20Let's%20talk.%0A%0A";
      }, 600);
      return "→ inbox opening now.";
    };
    window.whoami = () => "mayur · full-stack engineer · 12+ years · ahmedabad, in";

    window.__easterEgg = () => {
      console.log("%c✦ you triggered the easter egg from the palette. nice.", css3);
    };
  }, []);

  // ⌘K / Ctrl+K listener
  useEffectApp(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
        e.preventDefault();
        setCmdOpen((v) => !v);
      }
      if (e.key === "Escape") setCmdOpen(false);
      if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key.toLowerCase() === "l") {
        e.preventDefault();
        toggleTheme();
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  const p = { lang };

  return (
    <React.Fragment>
      <Topbar theme={theme} onToggleTheme={toggleTheme} onToggleLang={toggleLang} onOpenCmdK={() => setCmdOpen(true)} lang={lang} />
      <Hero {...p} />
      <About {...p} />
      <Projects {...p} />
      <CaseStudy {...p} />
      <Skills {...p} />
      <Experience {...p} />
      <GithubGraph {...p} />
      <Writing {...p} />
      <Now {...p} />
      <Contact {...p} />
      <Statusbar {...p} />
      <CommandPalette open={cmdOpen} onClose={() => setCmdOpen(false)} lang={lang} onToggleLang={toggleLang} />
    </React.Fragment>
  );
}

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