/* studio-gallery.jsx — landing grid of tool cards. */

(function () {
  const { TOOLS } = window.STUDIO_DATA;
  const { Icon } = window.STUDIO_ICONS;

  function ToolCard({ tool, onPick }) {
    const isLive = tool.status === "live";
    const tilt = (Math.sin(tool.id.charCodeAt(0) * 13) * 1.6).toFixed(2);
    const style = {
      "--card-color": `var(${tool.colorVar})`,
      "--rot": `${tilt}deg`
    };
    return (
      <button
        type="button"
        className={"tool-card" + (isLive ? "" : " coming-soon")}
        style={style}
        onClick={() => isLive && onPick(tool.id)}
        disabled={!isLive}
      >
        <div className="tape"/>
        <div className="tc-icon">{Icon[tool.icon] ? Icon[tool.icon]() : null}</div>
        <div className="tc-title">{tool.label}</div>
        <div className="tc-desc">{tool.tagline}</div>
        <div className={"tc-tag " + (isLive ? "live" : "soon")}>
          {isLive ? "Live" : "Soon"}
        </div>
      </button>
    );
  }

  function StudioGallery({ onPick }) {
    return (
      <div className="ws-output" style={{ paddingTop: 4 }}>
        <div className="gallery-intro">
          <div className="gi-mark">{Icon.brand()}</div>
          <p>
            <strong>Passage Studio</strong> — Decodable passages, built to a scope and sequence.
            In the live app an agent loop drafts a passage, checks it against a
            deterministic validator, revises and finalises. This demo replays a
            recorded run of that loop over pre-written passages — but the validator
            itself runs here, in your browser, so the pass badge and every check
            under it are computed rather than canned.
          </p>
        </div>

        <div className="gallery">
          {TOOLS.map((tool) => (
            <ToolCard key={tool.id} tool={tool} onPick={onPick}/>
          ))}
        </div>

        <div className="disclaimer">
          {Icon.info()}
          <span>
            Outputs are <strong>materials</strong>, not instruction. The validator
            confirms each passage meets your encoded decodability spec — it does
            not certify pedagogical or cultural appropriateness. Always
            teacher-review before classroom use. Passage Studio is not a substitute
            for explicit phonics teaching. In the live app the drafting runs on
            permissively-licensed models (DeepSeek MIT, Qwen Apache 2.0), so outputs
            are yours to use, adapt and sell. The passages here are pre-written
            samples.
          </span>
        </div>
      </div>
    );
  }

  window.StudioGallery = StudioGallery;
})();