/* arts.jsx — ARTS / 05 · image-and-title project index */

const { useState: useStateArt } = React;

const ARTS_PROJECTS = [
  {
    id: "hustly-archiv",
    num: "01",
    title: "HUSTLY ARCHIV",
    medium: "Archive",
    meta: "Korean hip-hop · since 2025",
    image: "/arts-media/hustly/hustly-writing.jpg",
    cols: 7,
    rows: 3,
    objectPosition: "50% 43%",
  },
  {
    num: "02",
    title: "KILL//SILENCE",
    medium: "Interface",
    meta: "Terminal sound interface · source",
    image: "/arts-media/kill-silence/main.png",
    href: "https://github.com/TaewoooPark/kill-silence",
    cols: 5,
    rows: 2,
    objectPosition: "center",
  },
  {
    id: "zweistein",
    num: "03",
    title: "Zweistein",
    medium: "Installation",
    meta: "AI for Science · counterfactual history",
    image: "/arts-media/zweistein/desktop.png",
    cols: 5,
    rows: 3,
    objectPosition: "center",
  },
  {
    id: "agi",
    num: "04",
    title: "AGI",
    medium: "Installation",
    meta: "Anxiety Generating Intelligence",
    image: "/arts-media/agi/anxiety-field.png",
    cols: 7,
    rows: 2,
    objectPosition: "center",
  },
];

/* Recurring concerns, pulled from the works themselves rather than stated
   in the abstract: Zweistein (co-authorship, discovery), AGI (attention and
   anxiety), HUSTLY ARCHIV (archive permanence), KILL//SILENCE (interface). */
const ARTS_TOPICS = [
  "AI for Science",
  "Epistemology of discovery",
  "Attention & anxiety",
  "Archive permanence",
  "Interface as medium",
];

function ArtsCard({ project }) {
  const { go } = useRouter();
  const [hover, setHover] = useStateArt(false);

  const interaction = project.href
    ? { as: "a", href: project.href, target: "_blank", rel: "noopener" }
    : { as: "button", type: "button", onClick: () => go(project.id) };

  return (
    <TiltCard
      {...interaction}
      intensity={4}
      className="arts-card"
      data-cursor="link"
      data-cursor-label={project.href ? t("Open source") : t("Open work")}
      aria-label={project.href ? `Open ${project.title} on GitHub` : `Open ${project.title}`}
      onMouseEnter={() => window.__hasHover && setHover(true)}
      onMouseLeave={() => window.__hasHover && setHover(false)}
      onFocus={() => setHover(true)}
      onBlur={() => setHover(false)}
      style={{
        gridColumn: `span ${project.cols}`,
        gridRow: `span ${project.rows}`,
        position: "relative",
        display: "block",
        minHeight: 0,
        overflow: "hidden",
        border: "1px solid var(--line)",
        background: "var(--fg)",
        color: "var(--bg)",
        textAlign: "left",
      }}
    >
      <img
        src={project.image}
        alt=""
        loading="lazy"
        style={{
          position: "absolute",
          inset: 0,
          width: "100%",
          height: "100%",
          objectFit: "cover",
          objectPosition: project.objectPosition,
          /* Site-wide image treatment — desaturated at rest, full colour on
             hover (same curve as the archive and paideia thumbnails). */
          filter: hover ? "grayscale(0%) contrast(1)" : "grayscale(100%) contrast(0.95)",
          transform: hover ? "scale(1.04)" : "scale(1)",
          transition: "filter 600ms var(--easing-default), transform 900ms var(--easing-default)",
        }}
      />

      {/* Register marks — index left, medium right (archive-page convention) */}
      <div className="micro" style={{
        position: "absolute", top: 12, left: 14, color: "var(--bg)",
        textShadow: "0 0 4px rgba(var(--fg-rgb), 0.6)",
      }}>{project.num}</div>
      <div className="micro" style={{
        position: "absolute", top: 12, right: 14, color: "var(--bg)",
        textShadow: "0 0 4px rgba(var(--fg-rgb), 0.6)",
      }}>{t(project.medium)}</div>

      <div className="arts-card-bar" style={{
        position: "absolute",
        left: 0,
        right: 0,
        bottom: 0,
        padding: "18px 20px",
        background: "rgba(var(--fg-rgb), .92)",
        borderTop: "1px solid rgba(255,255,255,.45)",
      }}>
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 16 }}>
          <div className="display-md" style={{ lineHeight: .96 }}>{project.title}</div>
          <span className="arts-card-arrow micro" aria-hidden="true">→</span>
        </div>
        <div className="arts-card-meta micro" style={{ color: "rgba(255,255,255,.72)" }}>
          {t(project.meta)}
        </div>
      </div>
    </TiltCard>
  );
}

function Arts() {
  useLang();
  return (
    <div className="page arts-page" style={{ paddingTop: 140 }}>
      <style>{`
        .arts-card:focus-visible { outline:3px solid var(--fg); outline-offset:3px; }
        .arts-card-arrow {
          color: var(--bg); opacity: 0; transform: translateX(-6px);
          transition: opacity 320ms var(--easing-default), transform 320ms var(--easing-default);
        }
        .arts-card-meta {
          max-height: 0; opacity: 0; overflow: hidden;
          transition: max-height 420ms var(--easing-default),
                      opacity 280ms var(--easing-default),
                      margin-top 420ms var(--easing-default);
        }
        @media (hover: hover) {
          .arts-card:hover .arts-card-arrow,
          .arts-card:focus-visible .arts-card-arrow { opacity: 1; transform: translateX(0); }
          .arts-card:hover .arts-card-meta,
          .arts-card:focus-visible .arts-card-meta { max-height: 32px; opacity: 1; margin-top: 8px; }
          .arts-card:hover .arts-card-bar { border-top-color: var(--bg); }
        }
        .arts-topics { display:flex; flex-wrap:wrap; gap:8px; }
        .arts-topic {
          border:1px solid var(--line-soft); padding:6px 10px;
          color: var(--fg-muted); white-space: nowrap;
        }
        @media (max-width:900px) {
          .arts-grid { grid-template-columns:1fr !important; grid-auto-rows:auto !important; }
          .arts-card { grid-column:1 !important; grid-row:auto !important; min-height:420px !important; }
          .arts-card-meta { max-height:32px; opacity:1; margin-top:8px; }
          .arts-card-arrow { opacity:1; transform:none; }
        }
        @media (max-width:560px) {
          .arts-card { min-height:360px !important; }
        }
      `}</style>

      <div className="page-eyebrow">
        <span className="micro">{t("Index")} 05</span>
        <span style={{ width:24, height:1, background:"var(--fg)" }} />
        <span className="micro micro-fg">{t("Arts · Four works")}</span>
      </div>

      {/* Two-column heading row — mirrors projects and startup: statement on
          the left, node trace + recurring concerns on the right. */}
      <div className="responsive-stack" style={{
        display: "grid", gridTemplateColumns: "1fr 1fr",
        gap: 64, marginBottom: 64, alignItems: "end",
      }}>
        <div>
          <h1 className="display-xl" style={{ marginBottom: 24 }}>Arts</h1>
          <p className="body-lg" style={{ maxWidth: 520 }}>
            {t("Drawing on physics, mathematics, code, and philosophy, I make things that do not yet exist.")}
          </p>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
          <div className="body-lg" style={{ color: "var(--fg-muted)" }}>
            {t("Recurring concerns: what happens to knowledge when the machine becomes a co-author, how an information environment manufactures anxiety out of verified facts, and what it takes for an archive to outlive the platform it was born on.")}
          </div>
          <div className="arts-topics">
            {ARTS_TOPICS.map(topic => (
              <span key={topic} className="arts-topic micro">{t(topic)}</span>
            ))}
          </div>
        </div>
      </div>

      <div className="arts-grid" style={{
        display: "grid",
        gridTemplateColumns: "repeat(12,minmax(0,1fr))",
        gridAutoRows: 132,
        gridAutoFlow: "dense",
        gap: 12,
      }}>
        {ARTS_PROJECTS.map(project => <ArtsCard key={project.id || project.href} project={project} />)}
      </div>
    </div>
  );
}

Object.assign(window, { Arts, ARTS_PROJECTS });