// app.jsx — shell: nav, language toggle, tweaks, mount
const { useState: uS, useEffect: uE, useRef: uR } = React;

// accent swatch hex -> data-accent key
const ACCENTS = [
  { hex: "#5b8def", key: "blue" },
  { hex: "#e0a23a", key: "amber" },
  { hex: "#33c082", key: "green" },
  { hex: "#a274f0", key: "violet" },
];
const accentKey = (hex) => (ACCENTS.find((a) => a.hex.toLowerCase() === String(hex).toLowerCase()) || ACCENTS[0]).key;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#5b8def",
  "theme": "dark",
  "mono": true,
  "motion": true,
  "band3am": true
}/*EDITMODE-END*/;

function applyRootAttrs(t) {
  const r = document.documentElement;
  r.setAttribute("data-accent", accentKey(t.accent));
  r.setAttribute("data-theme", t.theme);
  r.setAttribute("data-mono", t.mono ? "on" : "off");
  r.setAttribute("data-motion", t.motion ? "on" : "off");
}

function Nav({ lang, setLang, c }) {
  const [scrolled, setScrolled] = uS(false);
  const [menuOpen, setMenuOpen] = uS(false);
  uE(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  // lock body scroll while the mobile menu is open
  uE(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);
  const n = c.nav;
  const links = [
    { href: "#skills", label: n.skills },
    { href: "#experiencia", label: n.experience },
    { href: "#projetos", label: n.projects },
    { href: "#contato", label: n.contact },
  ];
  return (
    <nav className="nav" data-scrolled={scrolled} data-menu={menuOpen}>
      <div className="nav__inner">
        <a className="brand" href="#top" onClick={() => setMenuOpen(false)}>
          <span className="brand__mark">LS</span>
          <span className="brand__name"><b>Lucas</b><span className="brand__full"> Rebouças Silva</span></span>
        </a>
        <div className="nav__links">
          {links.map((l) => <a key={l.href} className="nav__link" href={l.href}>{l.label}</a>)}
        </div>
        <div className="nav__right">
          <div className="langtog" role="group" aria-label="Language">
            <span className="langtog__thumb" style={{ transform: lang === "en" ? "translateX(100%)" : "translateX(0)" }}></span>
            <button className="langtog__btn" data-on={lang === "pt"} onClick={() => setLang("pt")}>PT</button>
            <button className="langtog__btn" data-on={lang === "en"} onClick={() => setLang("en")}>EN</button>
          </div>
          <button
            className="nav__burger"
            aria-label={menuOpen ? "Fechar menu" : "Abrir menu"}
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen((o) => !o)}
          >
            <span></span><span></span><span></span>
          </button>
        </div>
      </div>
      <div className="nav__drawer" data-open={menuOpen}>
        {links.map((l, i) => (
          <a key={l.href} className="nav__drawer-link" href={l.href} style={{ transitionDelay: menuOpen ? `${0.05 + i * 0.04}s` : "0s" }} onClick={() => setMenuOpen(false)}>
            <span className="nav__drawer-idx">{String(i + 1).padStart(2, "0")}</span>{l.label}
          </a>
        ))}
      </div>
      <div className="nav__scrim" data-open={menuOpen} onClick={() => setMenuOpen(false)}></div>
    </nav>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  // language: persisted, else browser, else pt
  const [lang, setLangRaw] = uS(() => {
    const saved = localStorage.getItem("ls_lang");
    if (saved === "pt" || saved === "en") return saved;
    const nav = (navigator.language || "pt").toLowerCase();
    return nav.startsWith("pt") ? "pt" : "en";
  });
  const setLang = (l) => { setLangRaw(l); localStorage.setItem("ls_lang", l); };

  uE(() => { applyRootAttrs(t); }, [t.accent, t.theme, t.mono, t.motion]);
  uE(() => { document.documentElement.lang = lang === "pt" ? "pt-BR" : "en"; }, [lang]);

  const c = window.CONTENT[lang];

  return (
    <div className="app">
      <Nav lang={lang} setLang={setLang} c={c} />
      <main>
        <Hero c={c} />
        <Skills c={c} />
        <Experience c={c} />
        {t.band3am && <Interlude c={c} />}
        <Projects c={c} />
        <Clients c={c} />
        <Principles c={c} />
        <Contact c={c} />
      </main>

      <TweaksPanel>
        <TweakSection label={lang === "pt" ? "Direção visual" : "Visual direction"} />
        <TweakColor
          label={lang === "pt" ? "Cor de acento" : "Accent color"}
          value={t.accent}
          options={ACCENTS.map((a) => a.hex)}
          onChange={(v) => setTweak("accent", v)}
        />
        <TweakRadio
          label={lang === "pt" ? "Tema" : "Theme"}
          value={t.theme}
          options={["dark", "light"]}
          onChange={(v) => setTweak("theme", v)}
        />
        <TweakSection label={lang === "pt" ? "Detalhes" : "Details"} />
        <TweakToggle
          label={lang === "pt" ? "Micro-labels mono" : "Mono micro-labels"}
          value={t.mono}
          onChange={(v) => setTweak("mono", v)}
        />
        <TweakToggle
          label={lang === "pt" ? "Animações" : "Animations"}
          value={t.motion}
          onChange={(v) => setTweak("motion", v)}
        />
        <TweakToggle
          label={lang === "pt" ? "Faixa «3am»" : "«3am» band"}
          value={t.band3am}
          onChange={(v) => setTweak("band3am", v)}
        />
      </TweaksPanel>
    </div>
  );
}

// apply attrs ASAP to avoid flash
applyRootAttrs(TWEAK_DEFAULTS);
ReactDOM.createRoot(document.getElementById("root")).render(<App />);