/* Selected work — project rows with motif glyphs + a slide-in case study */

/* Minimal monochrome motif per project (brand-style line glyph, lightly animated) */
function Motif({ kind, active }) {
  const stroke = active ? "var(--fg1)" : "var(--fg3)";
  const common = { fill: "none", stroke, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", transition: "stroke .2s" };
  return (
    <svg viewBox="0 0 48 48" width="46" height="46" style={{ display: "block" }} aria-hidden>
      {kind === "circle" && (
        <g style={common}>
          <path d="M34 14 C 14 8, 8 30, 22 36 C 38 42, 40 18, 26 16" style={{ ...common, strokeDasharray: 120, strokeDashoffset: active ? 0 : 120, transition: "stroke-dashoffset .8s var(--ease-out), stroke .2s" }} />
          <circle cx="24" cy="24" r="3.2" style={common} />
        </g>
      )}
      {kind === "grid" && (
        <g style={common}>
          <rect x="9" y="9" width="12" height="12" rx="1.5" />
          <rect x="27" y="9" width="12" height="12" rx="1.5" />
          <rect x="9" y="27" width="12" height="12" rx="1.5" />
          <path d="M30 33 l2.5 2.5 L38 30" />
        </g>
      )}
      {kind === "cards" && (
        <g style={common}>
          <rect x="8" y="16" width="15" height="20" rx="2" transform="rotate(-8 15 26)" />
          <rect x="25" y="14" width="15" height="20" rx="2" transform="rotate(7 32 24)" />
        </g>
      )}
      {kind === "timeline" && (
        <g style={common}>
          <path d="M8 24 H40" />
          <circle cx="14" cy="24" r="3" />
          <circle cx="24" cy="24" r="3" />
          <circle cx="34" cy="24" r="3" />
        </g>
      )}
    </svg>
  );
}

function ProjectRow({ p, onOpen, i }) {
  const [hover, setHover] = React.useState(false);
  return (
    <Reveal delay={i * 70}>
      <button
        onClick={() => onOpen(p)}
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        style={{
          display: "grid", gridTemplateColumns: "62px 76px 1fr auto", gap: 22, alignItems: "center",
          width: "100%", textAlign: "left", padding: "30px 18px", borderTop: "1px solid var(--border-subtle)",
          background: hover ? "var(--ink-950)" : "transparent", transition: "background 180ms",
        }}
      >
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 15, color: hover ? "var(--fg1)" : "var(--fg4)", transition: "color 180ms" }}>{p.n}</span>
        <span style={{ width: 76, height: 76, display: "flex", alignItems: "center", justifyContent: "center", border: "1px solid var(--border-subtle)", borderRadius: 6, background: hover ? "var(--ink-900)" : "var(--bg-inset)", borderColor: hover ? "var(--border-default)" : "var(--border-subtle)", transition: "background .2s, border-color .2s" }}>
          <Motif kind={p.motif} active={hover} />
        </span>
        <span style={{ minWidth: 0 }}>
          <span style={{ display: "flex", alignItems: "baseline", gap: 14, flexWrap: "wrap" }}>
            <span className="ds-h3" style={{ transform: hover ? "translateX(6px)" : "none", transition: "transform 220ms var(--ease-out)" }}>{p.title}</span>
          </span>
          <span className="ds-caption" style={{ display: "block", marginTop: 8, maxWidth: 600 }}>{p.sub}</span>
          <span style={{ display: "flex", gap: 8, marginTop: 14, flexWrap: "wrap" }}>
            {p.stack.map((t) => (
              <span key={t} style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg3)", border: "1px solid var(--border-subtle)", borderRadius: 999, padding: "4px 11px" }}>{t}</span>
            ))}
          </span>
        </span>
        <span className="arrow" style={{ fontSize: 22, color: hover ? "var(--fg1)" : "var(--fg4)", transform: hover ? "translateX(4px)" : "none", transition: "transform 180ms, color 180ms" }}>→</span>
      </button>
    </Reveal>
  );
}

function CaseStudy({ p, onClose }) {
  React.useEffect(() => {
    if (!p) return;
    document.body.classList.add("noscroll");
    const onKey = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", onKey);
    return () => { document.body.classList.remove("noscroll"); window.removeEventListener("keydown", onKey); };
  }, [p]);
  if (!p) return null;
  const Block = ({ label, children }) => (
    <div style={{ marginBottom: 30 }}>
      <p className="eyebrow" style={{ marginBottom: 10 }}>{label}</p>
      <p className="ds-body" style={{ margin: 0, maxWidth: 620 }}>{children}</p>
    </div>
  );
  return (
    <div style={{ position: "fixed", inset: 0, zIndex: 100, background: "rgba(0,0,0,0.6)", backdropFilter: "blur(6px)", display: "flex", justifyContent: "flex-end", animation: "fadeBg .25s ease both" }} onClick={onClose}>
      <div onClick={(e) => e.stopPropagation()} style={{
        width: "min(660px, 100%)", height: "100%", background: "var(--bg-surface)", borderLeft: "1px solid var(--border-default)",
        boxShadow: "var(--shadow-lg)", overflowY: "auto", padding: "22px 44px 64px", animation: "slideIn .42s var(--ease-out) both",
      }}>
        <div style={{ display: "flex", justifyContent: "flex-end", alignItems: "center", marginBottom: 18 }}>
          <button onClick={onClose} className="lk" style={{ display: "flex", alignItems: "center", gap: 8, fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--fg3)" }}>
            close <span style={{ fontSize: 16 }}>×</span>
          </button>
        </div>
        <h2 className="ds-h1" style={{ fontSize: 46, margin: "0 0 6px" }}>{p.title}</h2>
        <p className="ds-body-lg" style={{ marginTop: 6, marginBottom: 34, color: "var(--fg2)" }}>{p.sub}</p>
        {p.site && (
          <a href={p.site} target="_blank" rel="noreferrer" className="lk" style={{ display: "inline-flex", alignItems: "center", gap: 8, marginBottom: 34, fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--fg1)", border: "1px solid var(--border-default)", borderRadius: 999, padding: "7px 13px" }}>
            {p.site.replace("https://", "")} <span className="arrow">→</span>
          </a>
        )}

        <Block label="the problem">{p.problem}</Block>
        <Block label="what i built">{p.build}</Block>

        <p className="eyebrow" style={{ marginBottom: 12 }}>stack</p>
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
          {p.stack.map((t) => (
            <span key={t} style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--fg2)", border: "1px solid var(--border-default)", borderRadius: 999, padding: "6px 13px" }}>{t}</span>
          ))}
        </div>
      </div>
      <style>{`@keyframes slideIn{from{transform:translateX(40px);opacity:.4}to{transform:none;opacity:1}}@keyframes fadeBg{from{opacity:0}to{opacity:1}}`}</style>
    </div>
  );
}

function Work({ onOpen }) {
  return (
    <section id="work" style={{ padding: "110px 0 40px" }}>
      <div className="wrap">
        <Reveal style={{ marginBottom: 18 }}><span className="eyebrow">02 — selected work</span></Reveal>
        <Reveal>
          <h2 className="ds-h1" style={{ maxWidth: 760, margin: "0 0 14px" }}>
            <WordReveal text="Four things I designed, built, and shipped." />
          </h2>
        </Reveal>
        <Reveal delay={80}>
          <p className="ds-body-lg" style={{ maxWidth: 520, margin: "0 0 44px", color: "var(--fg2)" }}>
            Each one started as a problem I couldn't stop thinking about. Click any to read the case study.
          </p>
        </Reveal>
        <div style={{ borderBottom: "1px solid var(--border-subtle)" }}>
          {window.PROJECTS.map((p, i) => <ProjectRow key={p.id} p={p} onOpen={onOpen} i={i} />)}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Work, CaseStudy });