aibook-fun/marketing-site/components/reader/WorkflowBlock.jsx

import { useState } from "react";
import Link from "next/link";
import TermOutput from "./TermOutput";

const JUMP = [
  { id: "kit", label: "Kit" },
  { id: "problem", label: "Problem" },
  { id: "actors", label: "Actors" },
  { id: "setup", label: "Setup" },
  { id: "safeguards", label: "Safeguards" },
  { id: "method", label: "Method" },
  { id: "evidence", label: "Evidence" },
  { id: "tryit", label: "Try-it" },
];

function ShieldCheck() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path
        d="M8 1.5 2.5 4v3.5c0 3 2.3 5.4 5.5 7 3.2-1.6 5.5-4 5.5-7V4L8 1.5Z"
        stroke="#1C5D4C"
        strokeWidth="1.3"
        strokeLinejoin="round"
      />
      <path
        d="m5.6 8 1.7 1.7L10.6 6"
        stroke="#1C5D4C"
        strokeWidth="1.3"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function CheckMark() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <circle cx="8" cy="8" r="7" stroke="currentColor" strokeWidth="1.4" />
      <path
        d="m5.2 8.2 1.8 1.8 3.8-4"
        stroke="currentColor"
        strokeWidth="1.4"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

async function copyText(text) {
  try {
    await navigator.clipboard.writeText(text);
    return true;
  } catch {
    try {
      const el = document.createElement("textarea");
      el.value = text;
      el.setAttribute("readonly", "");
      el.style.position = "fixed";
      el.style.left = "-9999px";
      document.body.appendChild(el);
      el.select();
      const ok = document.execCommand("copy");
      el.remove();
      return ok;
    } catch {
      return false;
    }
  }
}


function WorkflowKit({ recipe }) {
  const k = recipe.kit;
  if (!k) return null;
  const rows = [
    ["You run", k.youRun],
    ["Tools", (k.tools || []).join(" · ")],
    ["Files", (k.files || []).join(" · ")],
    ["Model", k.model],
    ["Time", recipe.time],
    ["Cost", recipe.cost],
    ["You produce", k.artifact],
  ].filter(([, v]) => v);
  return (
    <dl className="workflow-kit" id={`${recipe.anchor}-kit`} aria-label="What this workflow uses">
      {rows.map(([label, value]) => (
        <div key={label}>
          <dt>{label}</dt>
          <dd>{value}</dd>
        </div>
      ))}
    </dl>
  );
}

function Field({ anchor, name, label, children }) {
  return (
    <div className="row" id={`${anchor}-${name}`}>
      <h4 className="k">{label}</h4>
      <div className="v">{children}</div>
    </div>
  );
}

export default function WorkflowBlock({
  recipe,
  complete = false,
  onToggleComplete,
  focused = false,
  index = 1,
  total = 1,
}) {
  const [copied, setCopied] = useState(false);
  const a = recipe.anchor;

  const onShare = async () => {
    const ok = await copyText(recipe.shareBlurb);
    if (!ok) return;
    setCopied(true);
    window.setTimeout(() => setCopied(false), 1800);
  };

  return (
    <article
      id={a}
      className={`recipe recipe-nested${focused ? " recipe-focus" : ""}`}
      aria-labelledby={`${a}-title`}
    >
      <div className="recipe-top">
        <span className="recipe-id">
          Workflow {index} of {total} · <b>{recipe.id}</b> · v{recipe.version} · {recipe.time} · {recipe.cost}
        </span>
        <span className="recipe-vert">{recipe.vertical}</span>
      </div>

      <div className="recipe-body">
        <h3 className="recipe-title" id={`${a}-title`}>
          {recipe.title}
        </h3>

        <WorkflowKit recipe={recipe} />

        <nav className="recipe-jump" aria-label="In this workflow">
          {JUMP.map((j) => (
            <a key={j.id} href={`#${a}-${j.id}`}>
              {j.label}
            </a>
          ))}
        </nav>

        <Field anchor={a} name="problem" label="Problem">
          {recipe.problem} <span className="sub">{recipe.problemJob}</span>
        </Field>

        <Field anchor={a} name="actors" label="Actors">
          <ul className="plain-list">
            {recipe.actors.map((line) => (
              <li key={line}>{line}</li>
            ))}
          </ul>
        </Field>

        <Field anchor={a} name="setup" label="Setup">
          <ul className="plain-list">
            {recipe.setup.map((line) => (
              <li key={line}>{line}</li>
            ))}
          </ul>
        </Field>

        <Field anchor={a} name="safeguards" label="Safeguards">
          {recipe.safeguards.map((line) => (
            <div className="guard" key={line}>
              <ShieldCheck />
              <span>{line}</span>
            </div>
          ))}
        </Field>

        <Field anchor={a} name="method" label="Method">
          <ol className="steps">
            {recipe.method.map((step, i) => (
              <li key={i}>
                <div className="step-copy">
                  {step.text}
                  {step.term ? <TermOutput id={step.term} /> : null}
                </div>
              </li>
            ))}
          </ol>
        </Field>

        <Field anchor={a} name="evidence" label="Evidence">
          {recipe.evidence.map((line) => (
            <p key={line} className="evidence-p">
              {line}
            </p>
          ))}
        </Field>

        <Field anchor={a} name="tryit" label="Try-it">
          <p>
            About {recipe.tryit.minutes} minutes. {recipe.tryit.sample}{" "}
            {recipe.tryit.produce}
          </p>
          <p className="sub-line">
            {recipe.tryit.done}{" "}
            <a className="inline-sample" href={recipe.tryit.href} download>
              {recipe.tryit.hrefLabel}
            </a>
          </p>
          <p>
            <span className="chip">◷ {recipe.tryit.chip}</span>
          </p>
          {onToggleComplete ? (
            <div className="tryit-actions">
              <button
                type="button"
                className={`btn ${complete ? "btn-primary tryit-done" : "btn-ghost"}`}
                aria-pressed={complete}
                onClick={() => onToggleComplete(recipe.id)}
              >
                {complete ? <CheckMark /> : null}
                {complete ? "Counted as activation (demo)" : "Mark complete"}
              </button>
            </div>
          ) : null}
        </Field>

        <Field anchor={a} name="share" label="Share">
          <p>Copy a short result line. Share the outcome, not the recipe text.</p>
          <div className="tryit-actions">
            <button type="button" className="btn btn-ghost" onClick={onShare}>
              {copied ? "Copied" : "Copy result line"}
            </button>
          </div>
        </Field>

        <Field anchor={a} name="record" label="Record">
          <div className="recipe-record">
            <span>Author: {recipe.author}</span>
            <span>Sources: {recipe.sources}</span>
            <span>Last updated: {recipe.lastUpdated}</span>
            {focused ? (
              <span>
                <Link href={`/read/real-estate#${recipe.anchor}`}>
                  Back to the chapter
                </Link>
              </span>
            ) : (
              <span>
                <Link href={`/read/recipe/${recipe.id}`}>Open on paper</Link>
              </span>
            )}
          </div>
        </Field>
      </div>
    </article>
  );
}