// app.jsx — Composition root

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#c8643c",
  "showParticles": true
}/*EDITMODE-END*/;

// JSX requires capitalized identifiers — alias from window
const ParticleBG = window.ParticleBG;
const Hero = window.Hero;
const Philosophy = window.Philosophy;
const Radar = window.Radar;
const Projects = window.Projects;
const Career = window.Career;
const Certs = window.Certs;
const Testimonial = window.Testimonial;
const Contact = window.Contact;
const TweaksPanel = window.TweaksPanel;
const TweakSection = window.TweakSection;
const TweakColor = window.TweakColor;
const TweakToggle = window.TweakToggle;
const useTweaks = window.useTweaks;

function ScrollProgress() {
  const [p, setP] = React.useState(0);
  React.useEffect(() => {
    const onScroll = () => {
      const h = document.documentElement;
      const pct = h.scrollTop / Math.max(1, h.scrollHeight - h.clientHeight);
      setP(pct);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return <div className="scroll-progress" style={{ width: `${p * 100}%` }}/>;
}

function App() {
  const [lang, setLang] = React.useState("de");
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const t = window.CONTENT[lang];

  React.useEffect(() => {
    document.documentElement.style.setProperty("--accent", tweaks.accent);
    document.documentElement.style.setProperty("--accent-soft", tweaks.accent + "2e");
  }, [tweaks.accent]);

  const accentOptions = ["#7dd3fc", "#a3e635", "#f59e0b", "#a78bfa", "#fb7185"];

  return (
    <>
      <ScrollProgress/>
      {tweaks.showParticles && <ParticleBG/>}

      <nav className="nav">
        <div className="nav-brand">
          <span className="dot"></span>
          <span>bruno.margula</span>
        </div>
        <div className="nav-lang">
          <button className={lang === "de" ? "active" : ""} onClick={() => setLang("de")}>DE</button>
          <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
        </div>
      </nav>

      <main className="app">
        <Hero t={t} lang={lang}/>
        <Philosophy t={t}/>
        <Radar t={t} lang={lang}/>
        <Projects t={t}/>
        <Career t={t}/>
        <Certs t={t}/>
        <Testimonial t={t}/>
        <Contact t={t}/>
      </main>

      <TweaksPanel title="Tweaks">
        <TweakSection label={lang === "de" ? "Akzentfarbe" : "Accent"}/>
        <TweakColor
          label={lang === "de" ? "Akzent" : "Accent"}
          value={tweaks.accent}
          options={accentOptions}
          onChange={(v) => setTweak("accent", v)}/>
        <TweakSection label={lang === "de" ? "Hintergrund" : "Background"}/>
        <TweakToggle
          label={lang === "de" ? "Particles" : "Particles"}
          value={tweaks.showParticles}
          onChange={(v) => setTweak("showParticles", v)}/>
      </TweaksPanel>
    </>
  );
}

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