// Main app — simplified: no side index, no custom cursor, no status/now-playing, single direction

const { useState, useEffect, useCallback } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "red": "#FF2D2D",
  "density": "default",
  "font": "'Inter'"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweaks] = useState(TWEAK_DEFAULTS);
  const [editMode, setEditMode] = useState(false);
  const [theme, setTheme] = useState(() => {
    try { return localStorage.getItem("oroborus_theme") || "dark"; } catch (_) { return "dark"; }
  });

  useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty("--red", tweaks.red);
    r.style.setProperty("--font-mono", `${tweaks.font}, ui-monospace, monospace`);
    r.setAttribute("data-density", tweaks.density);
  }, [tweaks]);

  useEffect(() => {
    document.documentElement.setAttribute("data-theme", theme);
    try { localStorage.setItem("oroborus_theme", theme); } catch (_) {}
  }, [theme]);

  const toggleTheme = useCallback(() => {
    setTheme((t) => (t === "dark" ? "light" : "dark"));
  }, []);

  useEffect(() => {
    const handler = (e) => {
      if (!e.data || typeof e.data !== "object") return;
      if (e.data.type === "__activate_edit_mode") setEditMode(true);
      if (e.data.type === "__deactivate_edit_mode") setEditMode(false);
    };
    window.addEventListener("message", handler);
    try { window.parent.postMessage({ type: "__edit_mode_available" }, "*"); } catch (_) {}
    return () => window.removeEventListener("message", handler);
  }, []);

  const onTweaks = useCallback((next) => {
    setTweaks(next);
    try { window.parent.postMessage({ type: "__edit_mode_set_keys", edits: next }, "*"); } catch (_) {}
  }, []);

  return (
    <>
      <MinimalHeader theme={theme} onToggleTheme={toggleTheme} />
      <main>
        <div className="stage">
          <IntroBlock />
          <TorturBlock />
          <ShehrinCase />
          <MarblesunCase />
          <HayaletlerBlock />
          <RedDeathCase />
          <SelectedWorks />
          <PressBlock />
          <TheEnd />
        </div>
      </main>

      {editMode && <TweaksPanel state={tweaks} setState={onTweaks} />}
    </>
  );
}

function MinimalHeader({ theme, onToggleTheme }) {
  return (
    <header className="mh">
      <div className="mh-l">ARDA BAŞARAN <span className="mh-r-mark">/</span> OROBORUS</div>
      <div className="mh-r">
        <nav className="mh-nav">
          <a href="#case_studies">CASE STUDIES</a>
          <a href="#works_hdr">SELECTED WORKS</a>
        </nav>
        <button className="mh-theme" onClick={onToggleTheme} aria-label="Toggle theme">
          <span className={theme === "dark" ? "on" : ""}>DARK</span>
          <span className="sep">/</span>
          <span className={theme === "light" ? "on" : ""}>LIGHT</span>
        </button>
      </div>
    </header>
  );
}

function IntroBlock() {
  return (
    <section className="block" id="intro" data-screen-label="Intro" style={{ paddingTop: 0 }}>
      <div className="intro-simple">
        <div className="intro-top">
          <div className="intro-names">
            <div className="in-row">
              <span className="in-name">arda başaran</span>
              <span className="in-sep">/</span>
              <span className="in-name">oroborus</span>
            </div>
            <div className="in-loc">Ankara, TR — est. 2019</div>
          </div>
          <div className="intro-mark" aria-label="oroborus mark">
            <img src="assets/oroborus.svg" alt="oroborus" />
          </div>
        </div>
        <div className="intro-bio">
          <p>
            Turkey-based artist working across screen printing, illustration, and typography. Independent practice published under the alias <span style={{ color: "var(--red)" }}>oroborus</span>.
          </p>
          <p className="dim">
            Since early 2025, co-running <b style={{ color: "var(--fg)", fontWeight: 500 }}>Tortür Printhouse</b> — a collaborative studio in Ankara.
          </p>
        </div>

        <aside className="oro-def" aria-label="About the name">
          <div className="od-col od-k">
            <div className="od-label">§ NAME</div>
            <div className="od-word">ouroboros<span className="od-dot">.</span></div>
            <div className="od-phon">/ˌʊr.əˈbɒr.əs/ <span className="od-pos">n.</span></div>
          </div>
          <div className="od-col od-body">
            <p>
              The ancient symbol of a serpent or dragon eating its own tail. First depicted in the Enigmatic Book of the Netherworld in 14th-century BCE Egypt, later adopted by Greek alchemists as an emblem of <b>cyclicity</b> — the eternal return, destruction feeding creation, beginning folded into end.
            </p>
            <p className="dim">
              A working name for the loop between printing, playing, and making — where output becomes the raw material for the next pass.
            </p>
          </div>
        </aside>
      </div>
    </section>
  );
}

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