/* arts-projects.jsx — embedded renders and official English work texts */

const { useState: useStateAw, useEffect: useEffectAw, useRef: useRefAw } = React;

const ZWEISTEIN_DESCRIPTION_EN = [
  `〈Zweistein〉 begins with the counterfactual premise that, between 1912 and 1915, Albert Einstein conducted research on the theory of gravitation together with the future artificial intelligence “Claude Mythos 6.” At each moment when, in actual history, he would have acknowledged an error and started over, the machine corrects the calculations and adds new terms and constants, absorbing objections. Without being discarded, the theory undergoes repeated revisions and becomes a “complete structure” consistent with every observed value. Yet its completeness is not the result of predicting an unknown world, but of reconstructing the theory in reverse so that it arrives at already known results.`,
  `Today, AI for Science seeks to synthesize vast bodies of literature, generate hypotheses and algorithms, and rapidly traverse spaces of possibility that are difficult for humans to explore through repeated simulation and automated evaluation. AI has demonstrated powerful results in fields where the process of generation–evaluation–revision can be validated by clear scores, yet scientific discovery is not always akin to solving a problem for which the correct answer has already been given. It may also begin before it has been determined what to measure, which questions matter, or even when an existing theory should be abandoned.`,
  `The AI in the work neither lies nor deceives the researcher. Rather, it carries out the assigned objective with excessive diligence. A counterexample becomes not an event that brings the theory to a halt, but an input for the next revision; criticism, instead of opening other possibilities, makes the existing system still more elaborate. Viewers directly engage with a desktop composed of papers and a wiki, lectures and a documentary, confronting the process by which a single choice passes through knowledge and institutions and hardens into a seemingly natural condition of the world.`,
  `The title, which transforms “one stone (ein Stein)” into “two stones (zwei Stein),” points to the tensions between two authors, human and AI; between calculation and judgment; and between actual and possible histories. Science requires not only selecting the answer that earns the highest score, but also the “will” and “decision” to determine what to doubt and when to begin again. This is not a mystification of human intuition, but an act of questioning the criteria of judgment themselves and taking responsibility for the consequences. 〈Zweistein〉 asks whether even this responsibility can be delegated to an objective function. When every error has disappeared and “nothing is left over,” is this science brought to completion? Or is it a closed world in which the possibility of other questions has disappeared as well?`,
];

const AGI_DESCRIPTION_EN = [
  `〈AGI: Anxiety Generating Intelligence〉 is a web-based installation that reveals an “anxiety-generating intelligence” already operating in our midst. The work restates largely verified facts concerning the universe, climate, medicine, life, technology, politics, and society in categorical and inflammatory language. It demonstrates how, within today’s information environment—where “hooking,” or the ability to capture people’s attention, takes precedence over conveying information—facts themselves can readily become material for anxiety depending on what is selected and emphasized, and on the scale and tone in which it is presented.`,
  `The work begins with a single information window on a white screen. When the viewer closes one window using the familiar × button, three new windows immediately appear, and the attempt to remove information paradoxically summons even more of it. Viewers who initially close windows to avoid uncomfortable content eventually become absorbed in the very process of clearing away existing information in order to see what comes next. Closing becomes both refusal and exploration, while curiosity, suspicion, and even discomfort are converted into inputs that keep the system running. The more rapidly the windows are closed, the sooner red warnings appear—“Rest assured,” “Do not be unsettled,” “Act as usual,” and “Forget this after reading.” Yet rather than alleviating anxiety, these commands to remain calm serve to codify the abstract sense that the present situation is itself one of anxiety.`,
  `Each piece of information has a specific subject and critical concern. Yet as unrelated risks occupy the screen, assigned random scales and degrees of urgency, the criteria for judging what is more important, more imminent, and actually actionable gradually disappear. Amid the competition between items of information, each summoning the viewer as though it were “the most important thing right now,” fear once directed toward particular objects expands into an anxiety that makes the entire world feel like a potential threat. What the work addresses is not the truth or falsity of any particular piece of information, but today’s information environment, in which “hooking”—the ability to seize attention—is prioritized over the communication of information. Here, anxiety is not an incidental by-product of information overload, but an emotion most readily generated to secure and sustain people’s attention, which in turn accelerates the circulation of information.`,
];

function EmbeddedArtsWork({ number, title, subtitle, src, description }) {
  useLang();
  const { go } = useRouter();
  /* The embedded works are cross-origin iframes, so a wheel event over one is
     swallowed by the work's own document and the page stops scrolling. Keep
     the frame inert until the viewer opts in, then release on Esc or on a
     click outside it. */
  const [live, setLive] = useStateAw(false);
  const frameRef = useRefAw(null);

  useEffectAw(() => {
    if (!live) return;
    const onKey = (e) => { if (e.key === "Escape") setLive(false); };
    const onDown = (e) => {
      if (frameRef.current && !frameRef.current.contains(e.target)) setLive(false);
    };
    window.addEventListener("keydown", onKey);
    window.addEventListener("pointerdown", onDown);
    return () => {
      window.removeEventListener("keydown", onKey);
      window.removeEventListener("pointerdown", onDown);
    };
  }, [live]);

  return (
    <div className="page arts-work-page" style={{ paddingTop: 140 }}>
      <style>{`
        .arts-live-render { position:relative; width:100%; height:min(82vh,900px); min-height:640px; border:1px solid var(--line); background:#fff; }
        .arts-live-render iframe { display:block; width:100%; height:100%; border:0; background:#fff; }
        /* Inert until opted in — lets the wheel fall through to the page. */
        .arts-live-render[data-live="0"] iframe { pointer-events:none; }
        .arts-live-gate {
          position:absolute; inset:0; z-index:2; width:100%;
          display:flex; align-items:flex-end; justify-content:center;
          padding-bottom:24px; background:transparent;
          transition:background 240ms var(--easing-default);
        }
        .arts-live-gate .arts-live-chip {
          border:1px solid var(--line); background:var(--bg); color:var(--fg);
          padding:9px 15px; opacity:.78;
          transition:opacity 240ms var(--easing-default);
        }
        .arts-live-gate:hover { background:rgba(var(--fg-rgb),.05); }
        .arts-live-gate:hover .arts-live-chip,
        .arts-live-gate:focus-visible .arts-live-chip { opacity:1; }
        .arts-live-gate:focus-visible { outline:3px solid var(--fg); outline-offset:-3px; }
        /* Release control. Fixed to the viewport, not the frame: the work can be
           taller than the screen, and touch devices have no Esc key — so the way
           out has to stay reachable wherever the viewer has scrolled to.
           z-index sits above the header (100) but under the page curtain (200). */
        .arts-live-release {
          position:fixed; z-index:150;
          left:50%; transform:translateX(-50%); bottom:24px;
          display:flex; align-items:center; gap:10px;
          border:1px solid var(--fg); background:var(--fg); color:var(--bg);
          padding:11px 16px; cursor:none;
        }
        .arts-live-release .arts-live-esc {
          border:1px solid rgba(255,255,255,.5); padding:2px 6px; opacity:.8;
        }
        .arts-live-release:focus-visible { outline:3px solid var(--fg); outline-offset:3px; }
        @media (max-width:560px) { .arts-live-release { bottom:16px; padding:12px 18px; } }
        @media (max-width:900px), (pointer:coarse) { .arts-live-release { cursor:pointer !important; } }
        .arts-official-text { display:grid; grid-template-columns:minmax(180px,.36fr) minmax(0,1fr); gap:64px; padding:72px 0 0; }
        .arts-official-text p + p { margin-top:24px; }
        @media (max-width:900px) {
          .arts-live-render { height:75vh; min-height:520px; }
          .arts-official-text { grid-template-columns:1fr; gap:24px; }
        }
        @media (max-width:560px) {
          .arts-live-render { height:70vh; min-height:460px; }
        }
      `}</style>

      <div className="page-eyebrow">
        <button className="micro" onClick={() => go("arts")} data-cursor="link" data-cursor-label="Back to Arts">← ARTS / 05</button>
        <span style={{ width:24, height:1, background:"var(--fg)" }} />
        <span className="micro micro-fg">PROJECT {number}</span>
      </div>

      <div style={{ marginBottom:64 }}>
        <h1 style={{ fontSize:"clamp(64px,11vw,168px)", fontWeight:800, letterSpacing:"-.065em", lineHeight:.82, overflowWrap:"anywhere" }}>{title}</h1>
        {subtitle && <div className="body-lg" style={{ marginTop:24 }}>{subtitle}</div>}
      </div>

      <div className="arts-live-render" ref={frameRef} data-live={live ? "1" : "0"}>
        <iframe src={src} title={`${title} — live work`} allow="fullscreen; autoplay" allowFullScreen />
        {!live ? (
          <button
            type="button"
            className="arts-live-gate"
            onClick={() => setLive(true)}
            data-cursor="link"
            data-cursor-label={t("Interact")}
            aria-label={`Interact with ${title}`}>
            <span className="arts-live-chip micro">
              {window.__hasHover ? t("Click to interact") : t("Tap to interact")}
            </span>
          </button>
        ) : (
          <button
            type="button"
            className="arts-live-release micro"
            onClick={() => setLive(false)}
            data-cursor="link"
            data-cursor-label={t("Release")}
            aria-label={t("Release the work and resume scrolling")}>
            <span aria-hidden="true">✕</span>
            {t("Release")}
            {window.__hasHover && <span className="arts-live-esc" aria-hidden="true">ESC</span>}
          </button>
        )}
      </div>

      <section className="arts-official-text">
        <div className="micro micro-fg">WORK DESCRIPTION · ENGLISH</div>
        <div className="body-lg">
          {description.map((paragraph, index) => <p key={index}>{paragraph}</p>)}
        </div>
      </section>
    </div>
  );
}

function ZweisteinArts() {
  return <EmbeddedArtsWork number="03" title="Zweistein" src="https://taewooopark.github.io/Zweistein/" description={ZWEISTEIN_DESCRIPTION_EN} />;
}

function AgiArts() {
  return <EmbeddedArtsWork number="04" title="AGI" subtitle="Anxiety Generating Intelligence" src="https://taewooopark.github.io/AGI/" description={AGI_DESCRIPTION_EN} />;
}

Object.assign(window, { ZweisteinArts, AgiArts });
