/* global React */
const { useState: useStateC, useEffect: useEffectC, useRef: useRefC } = React;

// ============================================================
// Cover art — black/white generative covers per project
// ============================================================

function CoverProductE() {
  return (
    <svg viewBox="0 0 400 300" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
      <rect width="400" height="300" fill="currentColor" />
      {/* agentic rings */}
      <g stroke="var(--paper)" strokeWidth="0.6" fill="none">
        <circle cx="200" cy="150" r="30" />
        <circle cx="200" cy="150" r="60" opacity="0.7" />
        <circle cx="200" cy="150" r="95" opacity="0.5" />
        <circle cx="200" cy="150" r="130" opacity="0.3" strokeDasharray="2 3" />
      </g>
      <circle cx="200" cy="150" r="4" fill="var(--paper)" />
      {/* satellite nodes */}
      {[[0.3, 60], [1.2, 95], [2.4, 130], [4.1, 95], [5.2, 60]].map(([a, r], i) => (
        <circle key={i} cx={200 + Math.cos(a) * r} cy={150 + Math.sin(a) * r} r="3" fill="var(--paper)" />
      ))}
      <text x="28" y="278" fill="var(--paper)" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="2">
        FIG. 01 — AGENTIC GRAPH
      </text>
    </svg>
  );
}

function CoverTessellDB() {
  return (
    <svg viewBox="0 0 400 300" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
      <rect width="400" height="300" fill="currentColor" />
      {/* DB cylinders */}
      {[100, 200, 300].map((cx, i) => (
        <g key={cx} opacity={0.5 + i * 0.25}>
          <ellipse cx={cx} cy={100} rx="32" ry="8" fill="none" stroke="var(--paper)" strokeWidth="0.8" />
          <line x1={cx - 32} y1={100} x2={cx - 32} y2={180} stroke="var(--paper)" strokeWidth="0.8" />
          <line x1={cx + 32} y1={100} x2={cx + 32} y2={180} stroke="var(--paper)" strokeWidth="0.8" />
          <ellipse cx={cx} cy={140} rx="32" ry="8" fill="none" stroke="var(--paper)" strokeWidth="0.5" />
          <ellipse cx={cx} cy={180} rx="32" ry="8" fill="none" stroke="var(--paper)" strokeWidth="0.8" />
        </g>
      ))}
      {/* timing arrow */}
      <line x1="60" y1="230" x2="340" y2="230" stroke="var(--paper)" strokeWidth="0.6" />
      <text x="60" y="250" fill="var(--paper)" fontFamily="var(--font-mono)" fontSize="10">30 min</text>
      <text x="316" y="250" fill="var(--paper)" fontFamily="var(--font-mono)" fontSize="10">5 min</text>
      <text x="28" y="278" fill="var(--paper)" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="2">
        FIG. 02 — PROVISIONING
      </text>
    </svg>
  );
}

function CoverMartianPortfolio() {
  return (
    <svg viewBox="0 0 400 300" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
      <rect width="400" height="300" fill="currentColor" />
      <text x="200" y="190" textAnchor="middle" fill="var(--paper)" fontFamily="var(--font-sans)" fontSize="220" fontWeight="300" letterSpacing="-12">M</text>
      <ellipse cx="200" cy="160" rx="140" ry="34" fill="none" stroke="var(--paper)" strokeWidth="0.6" />
      <circle cx="340" cy="160" r="3" fill="var(--paper)" />
      <text x="28" y="278" fill="var(--paper)" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="2">
        FIG. 03 — PORTFOLIO
      </text>
    </svg>
  );
}

function CoverMartianDS() {
  return (
    <svg viewBox="0 0 400 300" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
      <rect width="400" height="300" fill="currentColor" />
      {/* grid of component tiles */}
      {Array.from({ length: 6 }).map((_, i) =>
        Array.from({ length: 4 }).map((_, j) => (
          <rect
            key={`${i}-${j}`}
            x={40 + i * 56}
            y={30 + j * 52}
            width="44"
            height="40"
            fill="none"
            stroke="var(--paper)"
            strokeWidth="0.5"
            opacity={((i + j) % 3) === 0 ? 1 : 0.35}
          />
        ))
      )}
      <text x="28" y="278" fill="var(--paper)" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="2">
        FIG. 04 — SYSTEM
      </text>
    </svg>
  );
}

function CoverSide({ id }) {
  const variants = {
    "copy-translator": (
      <g>
        {["INTO", "THE", "VOICE", "OF"].map((t, i) => (
          <text key={t} x="200" y={90 + i * 48} textAnchor="middle" fill="var(--paper)" fontFamily="var(--font-sans)" fontSize="38" fontWeight="300" letterSpacing="-2" opacity={1 - i * 0.18}>{t}</text>
        ))}
      </g>
    ),
    "market-scanner": (
      <g>
        {Array.from({ length: 40 }).map((_, i) => {
          const h = 20 + Math.abs(Math.sin(i * 0.7) * 80);
          return <line key={i} x1={40 + i * 8} x2={40 + i * 8} y1={150 - h / 2} y2={150 + h / 2} stroke="var(--paper)" strokeWidth="1.4" />;
        })}
      </g>
    ),
    "ds-generator": (
      <g>
        {Array.from({ length: 5 }).map((_, i) =>
          Array.from({ length: 5 }).map((_, j) => (
            <rect key={`${i}-${j}`} x={60 + i * 56} y={40 + j * 44} width="44" height="32" fill="none" stroke="var(--paper)" strokeWidth="0.6" opacity={((i + j) % 3) === 0 ? 1 : 0.4} />
          ))
        )}
      </g>
    ),
  };
  return (
    <svg viewBox="0 0 400 300" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
      <rect width="400" height="300" fill="currentColor" />
      {variants[id]}
    </svg>
  );
}

function ProjectCard({ project, isSide, onOpen }) {
  const cover =
    project.id === "tessell-productE" ? <CoverProductE /> :
    project.id === "tessell-db-provisioning" ? <CoverTessellDB /> :
    project.id === "martian-portfolio" ? <CoverMartianPortfolio /> :
    project.id === "martian-design-strategies" ? <CoverMartianDS /> :
    <CoverSide id={project.id} />;

  return (
    <article className="pcard fade-up">
      <div className="pcard__media">{cover}</div>
      <div className="pcard__body">
        <div className="pcard__no">
          {isSide ? "SIDE PROJECT" : "SELECTED WORK"} · PAGE {String(project.page).padStart(2, "0")}
        </div>
        <h3 className="pcard__title">{project.title}</h3>
        <div className="pcard__sub">{project.subtitle}</div>

        {project.impact && (
          <ul style={{ listStyle: "none", padding: 0, margin: "0 0 24px", fontSize: 13, color: "var(--muted)" }}>
            {project.impact.slice(0, 3).map((it, i) => (
              <li key={i} style={{ paddingLeft: 14, textIndent: -14 }}>— {it}</li>
            ))}
          </ul>
        )}

        <div className="pcard__meta">
          <span>{project.period || ""}</span>
          <button className="btn-ghost" onClick={() => onOpen && onOpen(project)}>
            Open ↗
          </button>
        </div>
      </div>
    </article>
  );
}

Object.assign(window, { ProjectCard, CoverProductE, CoverTessellDB, CoverMartianPortfolio, CoverMartianDS, CoverSide });