Evidence

{item.num} {item.title}

{item.description &&

{item.description}

} {gwIcons.upload} Click to upload or drag and drop {(item.accepts || ["PDF"]).join(", ")} · up to {item.maxSize || "25 MB"} {files.length > 0 && (

{gwIcons.evidence} {f.name} {fmt(f.size)}

)} Notes

setNotes(e.target.value)}
          placeholder={item.notesPlaceholder || "Add context for reviewers…"}
        />
      </label>

<CompleteBar complete={complete} onComplete={onComplete} />
    </article>
  );
}

/* ============================================================
   MediaView — single-image or single-video display
   Maps to the "Image Picker" question type in the form builder.
   Layout: optional title/description + large media + optional
   comment box + Mark-as-complete.
   ============================================================ */
function MediaView({ item, complete, onComplete }) {
  const [comment, setComment] = useState("");
  const isVideo = item.mediaKind === "video";
  const isMulti = Array.isArray(item.images) && item.images.length > 1;
  return (
    <article className="gw-view gw-view-media">
      {item.showTitle && (
        <>
          <div className="gw-tag-row">
            <span className={`gw-tag is-media-${isVideo ? "video" : "image"}`}>
              {isVideo ? "Video" : (isMulti ? "Images" : "Image")}
            </span>
          </div>
          <h2 className="gw-view-title">{item.num} {item.title}</h2>
          {item.description && <p className="gw-block-para">{item.description}</p>}
        </>
      )}

{isMulti ? (
        <Gallery images={item.images} />
      ) : (
        <div className={`gw-media-frame fit-${item.fit || "cover"}`}>
          {isVideo ? (
            <div className="gw-media-video" role="button" tabIndex={0}>
              {item.poster && <img src={item.poster} alt={item.title || ""} />}
              <span className="gw-video-play">{gwIcons.play}</span>
              <span className="gw-video-len">4:12</span>
            </div>
          ) : (
            <img src={item.src} alt={item.title || ""} loading="lazy" />
          )}
        </div>
      )}

{item.commentBox && (
        <label className="gw-field">
          <span className="gw-field-lbl">Your notes</span>
          <textarea
            className="gw-textarea"
            rows="3"
            value={comment}
            onChange={(e) => setComment(e.target.value)}
            placeholder="Add anything you noticed about this image…"
          />
        </label>
      )}

<CompleteBar complete={complete} onComplete={onComplete} />
    </article>
  );
}

/* ============================================================
   QuestionView — handles the 5 interactive question sub-types:
   radio, rating, boolean, text, textarea.
   Controlled component: takes `answer` + `onAnswer` from App so the
   value survives navigation.
   ============================================================ */
function QuestionView({ item, answer, onAnswer, complete, pollLive, onComplete, sessionOpen, onOpenSession, onReopenPoll }) {
  const value   = answer?.value ?? null;
  const comment = answer?.comment ?? "";
  const notes   = answer?.notes ?? "";
  const setVal  = (v) => onAnswer({ value: v, comment, notes });
  const setCom  = (c) => onAnswer({ value, comment: c, notes });
  const setNotes = (n) => onAnswer({ value, comment, notes: n });

const subtype = item.questionType;
  const isPoll  = item.mode === "poll";

/* In poll mode, the actual responses come from anonymous participants on
     their devices, so the input here is a non-interactive preview. */
  const renderInput = (disabled) => (
    <fieldset className="gw-question-fieldset" disabled={disabled}>
      {subtype === "radio"    && <RadioGroup    item={item} value={disabled ? null : value} onChange={setVal} />}
      {subtype === "rating"   && <RatingScale   item={item} value={disabled ? 0    : value} onChange={setVal} />}
      {subtype === "boolean"  && <BooleanInput  item={item} value={disabled ? null : value} onChange={setVal} />}
      {subtype === "text"     && <SingleLine    item={item} value={disabled ? ""   : value} onChange={setVal} placeholderOverride={disabled ? "Participants type their answer here…" : null} />}
      {subtype === "textarea" && <LongText      item={item} value={disabled ? ""   : value} onChange={setVal} placeholderOverride={disabled ? "Participants type their answer here…" : null} />}
    </fieldset>
  );

/* Poll lifecycle state — used to pick which action chip to render */
  const pollState = !isPoll ? null
    : pollLive          ? "live"
    : complete          ? "closed"
    : "never";
  const responded = item.session?.responded || 0;
  const dist = (isPoll && pollState === "closed") ? computeDistribution(item) : null;

return (
    <article className={`gw-view gw-view-question is-${subtype} ${isPoll ? "is-poll-mode" : ""} ${pollState ? "poll-state-" + pollState : ""}`}>
      {item.showTitle && (
        <>
          <div className="gw-tag-row">
            {isPoll && <span className="gw-tag is-poll">Poll</span>}
            <span className="gw-tag is-question">{labelForQuestion(subtype)}</span>
            {item.required && <span className="gw-tag is-required">Required</span>}
            {pollState === "closed" && (
              <span className="gw-tag is-closed">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                Poll closed · {responded} responded
              </span>
            )}
          </div>
          <h2 className="gw-view-title">{item.num} {item.title}</h2>
          {item.description && <p className="gw-block-para gw-poll-question">{item.description}</p>}
        </>
      )}

<div className="gw-question-input">
        {pollState === "closed" ? (
          <PollResults
            item={item}
            dist={dist}
            notes={notes}
            onNotesChange={setNotes}
            onReopen={onReopenPoll}
          />
        ) : (
          renderInput(isPoll)
        )}
      </div>

{isPoll && pollState !== "closed" ? (
        <>
          {pollState === "never" && (
            <div className="gw-poll-helper">
              Polls collect anonymous responses from session participants. Open
              the poll to start collecting answers.
            </div>
          )}
          {pollState === "live" && (
            <div className="gw-poll-helper">
              The poll is live — share the session code or QR with participants
              on the side panel. Mark complete to close it.
            </div>
          )}
          <div className="gw-action-row">
            {pollState === "never" && (
              <button className="gw-btn gw-btn-tonal" onClick={onOpenSession}>
                {gwIcons.play}<span>Open poll</span>
              </button>
            )}
            {pollState === "live" && (
              <button className="gw-btn gw-btn-tonal is-on" onClick={onOpenSession}>
                <span className="gw-live-dot" />
                <span>Poll live · {responded} responded</span>
              </button>
            )}
            <div className="gw-complete-bar is-inline">
              {complete ? (
                <button className="gw-btn gw-btn-completed" onClick={onComplete} title="Mark as not complete">
                  <span className="gw-btn-check">{gwIcons.check}</span>
                  <span>Completed</span>
                </button>
              ) : (
                <button className="gw-btn gw-btn-primary" onClick={onComplete} disabled={pollState === "never"} title={pollState === "never" ? "Open the poll first" : "Closes the poll to new responses"}>
                  <span className="gw-btn-check">{gwIcons.check}</span>
                  <span>Mark complete & close poll</span>
                </button>
              )}
            </div>
          </div>
        </>
      ) : !isPoll ? (
        <>
          {item.commentBox && (
            <label className="gw-field">
              <span className="gw-field-lbl">Add a comment <span className="gw-field-optional">(optional)</span></span>
              <textarea
                className="gw-textarea"
                rows="3"
                value={comment}
                onChange={(e) => setCom(e.target.value)}
                placeholder="Anything to add to your answer above?"
              />
            </label>
          )}
          <CompleteBar complete={complete} onComplete={onComplete} />
        </>
      ) : null}
    </article>
  );
}

function labelForQuestion(s) {
  return { radio: "Multiple choice", rating: "Rating", boolean: "Yes / No", text: "Short answer", textarea: "Long answer" }[s] || "Question";
}

/* ──── Radio group ──── */
function RadioGroup({ item, value, onChange }) {
  return (
    <div className="gw-radio-group">
      {item.options.map((opt, i) => {
        const selected = value === opt;
        return (
          <label key={i} className={`gw-radio-card ${selected ? "is-selected" : ""}`}>
            <input type="radio" name={`r-${item.id}`} checked={selected} onChange={() => onChange(opt)} />
            <span className="gw-radio-dot"><span className="gw-radio-dot-inner"/></span>
            <span className="gw-radio-card-lbl">{opt}</span>
          </label>
        );
      })}
    </div>
  );
}

/* ──── Rating scale (stars or numbers) ──── */
function RatingScale({ item, value, onChange }) {
  const { min = 1, max = 5 } = item.scale || {};
  const labels = item.labels || {};
  const style = item.scaleStyle || "stars";
  const v = Number.isFinite(value) ? value : 0;
  const items = [];
  for (let i = min; i <= max; i++) items.push(i);
  return (
    <div className={`gw-rating gw-rating-${style}`}>
      <div className="gw-rating-row">
        {items.map((n) => {
          const active = n <= v;
          return (
            <button key={n} type="button" className={`gw-rating-cell ${active ? "is-active" : ""}`} onClick={() => onChange(n)} aria-label={`Rate ${n}`}>
              {style === "stars" ? (
                <svg viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" strokeWidth="1" strokeLinejoin="round">
                  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
                </svg>
              ) : (
                <span className="gw-rating-num">{n}</span>
              )}
            </button>
          );
        })}
      </div>
      {(labels.min || labels.max) && (
        <div className="gw-rating-labels">
          <span>{labels.min}</span>
          <span>{labels.max}</span>
        </div>
      )}
    </div>
  );
}

/* ──── Boolean (Yes / No) ──── */
function BooleanInput({ item, value, onChange }) {
  const t = item.trueLabel || "Yes";
  const f = item.falseLabel || "No";
  return (
    <div className="gw-bool-group">
      <button type="button" className={`gw-bool-btn ${value === true ? "is-yes" : ""}`} onClick={() => onChange(true)}>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        <span>{t}</span>
      </button>
      <button type="button" className={`gw-bool-btn ${value === false ? "is-no" : ""}`} onClick={() => onChange(false)}>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
        <span>{f}</span>
      </button>
    </div>
  );
}

/* ──── Single line input ──── */
function SingleLine({ item, value, onChange, placeholderOverride }) {
  const max = item.maxLength;
  const v = value || "";
  return (
    <div className="gw-text-wrap">
      <input
        type="text"
        className="gw-text-input"
        value={v}
        onChange={(e) => onChange(e.target.value.slice(0, max || 1000))}
        placeholder={placeholderOverride || item.placeholder || "Type your answer…"}
        maxLength={max}
      />
      {max && <span className="gw-text-counter">{v.length}/{max}</span>}
    </div>
  );
}

/* ──── Long text ──── */
function LongText({ item, value, onChange, placeholderOverride }) {
  const v = value || "";
  return (
    <textarea
      className="gw-textarea gw-textarea-large"
      rows={item.rows || 4}
      value={v}
      onChange={(e) => onChange(e.target.value)}
      placeholder={placeholderOverride || item.placeholder || "Type your answer…"}
    />
  );
}

/* ============================================================
   PollResults — visualizations shown when a poll has been closed.
   Each questionType gets its own chart treatment.
   ============================================================ */

/* Sample text-poll responses (deterministic by seed) — used only when the
   item itself doesn't ship explicit results. Keeps the prototype seeded. */
const SAMPLE_TEXT_RESPONSES = [
  "Heavy", "Fragmented", "Slow", "Agile", "Stuck", "Reactive", "Improving",
  "Disconnected", "Solid", "Patchy", "Working", "Stretched", "Streamlined",
  "Manual", "Confused", "Aligned",
];
const SAMPLE_TEXTAREA_RESPONSES = [
  "We've made progress in the operations review cadence but our data layer is still patchy. Hard to make real decisions without a single source of truth.",
  "Honestly the operating model feels great in some sites and disjointed in others. We need a clearer set of non-negotiables.",
  "There's a real tension between speed and consistency. Leadership says they want both — we feel forced to pick.",
  "Capability gaps are real. Onboarding works but mid-career upskilling is something we never invest in.",
  "Decision rights are theoretically clear, but in practice escalation happens for everything.",
  "We've been waiting on the tooling consolidation for ~18 months. Lots of duplicate effort still.",
];

/* Deterministic distribution generator based on session code + index */
function poissonish(seed, n) {
  let s = seed * 9301 + 49297;
  const rng = () => { s = (s * 9301 + 49297) % 233280; return s / 233280; };
  const out = [];
  for (let i = 0; i < n; i++) out.push(Math.max(1, Math.round(rng() * 100)));
  return out;
}

function computeDistribution(item) {
  const total = item.session?.responded || 0;
  if (total === 0) return null;
  const seed = parseInt((item.session?.code || "0").replace(/\D/g, ""), 10) || 1;
  const t = item.questionType;

if (t === "radio") {
    const N = item.options.length;
    const raw = poissonish(seed * 7, N);
    const sum = raw.reduce((a, b) => a + b, 0);
    const counts = raw.map((c) => Math.max(1, Math.round((c / sum) * total)));
    return { counts, labels: item.options, total };
  }
  if (t === "rating") {
    const max = item.scale?.max || 5;
    const min = item.scale?.min || 1;
    const N = max - min + 1;
    /* skew toward upper-middle */
    const raw = [];
    let s = seed;
    for (let i = 0; i < N; i++) {
      s = (s * 9301 + 49297) % 233280;
      const r = s / 233280;
      const weight = 0.3 + Math.abs(Math.sin((i / (N - 1)) * Math.PI)) * 1.2;
      raw.push(Math.max(1, Math.round(r * 100 * weight)));
    }
    const sum = raw.reduce((a, b) => a + b, 0);
    const counts = raw.map((c) => Math.max(0, Math.round((c / sum) * total)));
    return { counts, max, min, total };
  }
  if (t === "boolean") {
    const yesPct = 40 + (seed % 35); /* between 40-74% yes */
    const yes = Math.round((yesPct / 100) * total);
    return { yes, no: total - yes, total };
  }
  if (t === "text") {
    const count = Math.min(SAMPLE_TEXT_RESPONSES.length, total);
    return { responses: SAMPLE_TEXT_RESPONSES.slice(0, count), total };
  }
  if (t === "textarea") {
    const count = Math.min(SAMPLE_TEXTAREA_RESPONSES.length, Math.max(3, Math.min(total, 6)));
    return { responses: SAMPLE_TEXTAREA_RESPONSES.slice(0, count), total };
  }
  return null;
}

/* Grade mapping: scale a numeric score (1..max) to a letter grade */
function scoreToGrade(avg, max) {
  if (max <= 1) return "—";
  const norm = (avg - 1) / (max - 1); /* 0..1 */
  if (norm >= 0.85) return "A";
  if (norm >= 0.65) return "B";
  if (norm >= 0.45) return "C";
  if (norm >= 0.25) return "D";
  return "F";
}

<div className="gw-pr-chart">
        {t === "radio"    && <RadioChart    item={item} dist={dist} />}
        {t === "rating"   && <RatingChart   item={item} dist={dist} />}
        {t === "boolean"  && <BooleanChart  item={item} dist={dist} />}
        {t === "text"     && <TextResponses item={item} dist={dist} />}
        {t === "textarea" && <TextareaResponses item={item} dist={dist} />}
      </div>

<div className="gw-pr-banner">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 8v4M12 16h0"/></svg>
        <span>Live results from this session. Use the notes area below to capture clarifications, actions, or follow-up items.</span>
      </div>

<label className="gw-field">
        <span className="gw-field-lbl">Notes</span>
        <textarea
          className="gw-textarea"
          rows="3"
          value={notes || ""}
          onChange={(e) => onNotesChange(e.target.value)}
          placeholder="Add notes…"
        />
      </label>

<div className="gw-action-row">
        <button className="gw-btn gw-btn-tonal" onClick={onReopen}>
          {gwIcons.play}<span>Re-open poll</span>
        </button>
      </div>
    </div>
  );
}

/* ──── Stats row ──── */
function PollStats({ item, dist, grade, onToggleGrade }) {
  const t = item.questionType;
  let primary = null, secondary = null;

if (t === "radio" || t === "rating") {
    const counts = dist.counts;
    const max = t === "rating" ? (dist.max - dist.min + 1) : counts.length;
    const sum = counts.reduce((acc, c, i) => acc + c * (i + 1), 0);
    const total = counts.reduce((a, b) => a + b, 0);
    const avg = sum / total;
    const healthy = counts.slice(Math.ceil(max / 2)).reduce((a, b) => a + b, 0);
    const healthPct = Math.round((healthy / total) * 100);
    primary = grade ? (
      { icon: "grade", label: "Grade", value: scoreToGrade(avg, max) }
    ) : (
      { icon: "score", label: "Average score", value: `${avg.toFixed(2)} out of ${max.toFixed(2)}` }
    );
    secondary = { icon: "health", label: "Health score", value: `${healthPct}%` };
  } else if (t === "boolean") {
    const yesPct = Math.round((dist.yes / dist.total) * 100);
    primary   = { icon: "score",  label: (item.trueLabel  || "Yes"), value: `${dist.yes} · ${yesPct}%` };
    secondary = { icon: "health", label: (item.falseLabel || "No"),  value: `${dist.no} · ${100 - yesPct}%` };
  } else if (t === "text" || t === "textarea") {
    primary   = { icon: "score",  label: "Responses",        value: `${dist.total}` };
    secondary = { icon: "health", label: "Unique answers",   value: `${dist.responses.length}` };
  }

return (
    <div className="gw-pr-stats">
      {primary && <StatCard {...primary} />}
      {secondary && <StatCard {...secondary} />}
      {(t === "radio" || t === "rating") && (
        <label className="gw-pr-grade-toggle">
          <span className="gw-pr-grade-track" data-on={grade}>
            <input type="checkbox" checked={grade} onChange={(e) => onToggleGrade(e.target.checked)} />
            <span className="gw-pr-grade-knob" />
          </span>
          <span>View results as grade</span>
        </label>
      )}
    </div>
  );
}

/* ──── Radio — stacked horizontal bar ──── */
const RADIO_PALETTE = [
  "#0891b2", "#67e8f9", "#9ca3af", "#c4b5fd", "#7c3aed",
];
function paletteAt(i, n) {
  /* even-spread sampling of the palette regardless of n */
  const idx = Math.round((i / Math.max(1, n - 1)) * (RADIO_PALETTE.length - 1));
  return RADIO_PALETTE[idx];
}

function RadioChart({ item, dist }) {
  const total = dist.counts.reduce((a, b) => a + b, 0);
  const N = dist.counts.length;
  const segments = dist.counts.map((c, i) => ({
    label: dist.labels[i],
    count: c,
    pct: Math.round((c / total) * 100),
    color: paletteAt(i, N),
  }));
  const [hover, setHover] = useState(null);

return (
    <div className="gw-chart-radio">
      <div className="gw-chart-bar-wrap">
        <div className="gw-chart-bar">
          {segments.map((s, i) => (
            <div
              key={i}
              className="gw-chart-seg"
              style={{ flex: Math.max(s.pct, 1), background: s.color }}
              onMouseEnter={() => setHover(i)}
              onMouseLeave={() => setHover(null)}
            >
              {s.pct >= 6 && <span className="gw-chart-seg-pct">{s.pct}%</span>}
              {hover === i && (
                <span className="gw-chart-tip">
                  {s.label} · {s.count} responses
                </span>
              )}
            </div>
          ))}
        </div>
        <div className="gw-chart-axis">
          <span>0%</span><span>25%</span><span>50%</span><span>75%</span><span>100%</span>
        </div>
      </div>
      <ul className="gw-chart-legend">
        {segments.map((s, i) => (
          <li key={i}>
            <span className="gw-legend-dot" style={{ background: s.color }} />
            <span>{s.label}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

/* ──── Rating — vertical histogram with average overlay ──── */
function RatingChart({ item, dist }) {
  const total = dist.counts.reduce((a, b) => a + b, 0);
  const max = Math.max(...dist.counts);
  const sumWeighted = dist.counts.reduce((acc, c, i) => acc + c * (dist.min + i), 0);
  const avg = sumWeighted / total;
  const N = dist.counts.length;

return (
    <div className="gw-chart-rating">
      <div className="gw-chart-rating-bars">
        {dist.counts.map((c, i) => {
          const star = dist.min + i;
          const h = max > 0 ? (c / max) * 100 : 0;
          const pct = total > 0 ? Math.round((c / total) * 100) : 0;
          return (
            <div key={i} className="gw-chart-rating-col">
              <span className="gw-chart-rating-num">{c}</span>
              <span className="gw-chart-rating-bar" style={{ height: `${h}%` }}>
                <span className="gw-chart-rating-fill" />
              </span>
              <span className="gw-chart-rating-lbl">
                {Array.from({length: star}).map((_, k) => (
                  <svg key={k} viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                ))}
              </span>
              <span className="gw-chart-rating-pct">{pct}%</span>
            </div>
          );
        })}
      </div>
      <div className="gw-chart-rating-avg" style={{ left: `calc(${((avg - dist.min) / (N - 1)) * 100}% )` }}>
        <span className="gw-chart-rating-avg-lbl">Avg {avg.toFixed(1)}</span>
      </div>
    </div>
  );
}

/* ──── Boolean — large split with dominant choice in big type ──── */
function BooleanChart({ item, dist }) {
  const yesPct = Math.round((dist.yes / dist.total) * 100);
  const noPct = 100 - yesPct;
  const dominantYes = yesPct >= noPct;
  return (
    <div className="gw-chart-bool">
      <div className="gw-chart-bool-hero">
        <div className={`gw-chart-bool-big ${dominantYes ? "is-yes" : "is-no"}`}>
          <span className="gw-chart-bool-big-num">{dominantYes ? yesPct : noPct}%</span>
          <span className="gw-chart-bool-big-lbl">said {dominantYes ? (item.trueLabel || "Yes") : (item.falseLabel || "No")}</span>
        </div>
      </div>
      <div className="gw-chart-bool-bar">
        <div className="gw-chart-bool-seg is-yes" style={{ flex: yesPct }}>
          <span>{item.trueLabel || "Yes"}</span>
          <span>{yesPct}%</span>
        </div>
        <div className="gw-chart-bool-seg is-no" style={{ flex: noPct }}>
          <span>{item.falseLabel || "No"}</span>
          <span>{noPct}%</span>
        </div>
      </div>
    </div>
  );
}

/* ──── Text — chips of all responses ──── */
function TextResponses({ item, dist }) {
  return (
    <div className="gw-chart-text">
      <div className="gw-chart-text-chips">
        {dist.responses.map((r, i) => (
          <span key={i} className="gw-chart-chip" style={{ fontSize: `${14 + (i % 3) * 2}px` }}>{r}</span>
        ))}
      </div>
    </div>
  );
}

/* ──── Textarea — cards of all responses ──── */
function TextareaResponses({ item, dist }) {
  const [expanded, setExpanded] = useState(false);
  const visible = expanded ? dist.responses : dist.responses.slice(0, 3);
  return (
    <div className="gw-chart-textarea">
      <ul className="gw-chart-textarea-list">
        {visible.map((r, i) => (
          <li key={i}>
            <span className="gw-chart-quote">"</span>
            <p>{r}</p>
            <span className="gw-chart-resp-meta">Anonymous · response {i + 1}</span>
          </li>
        ))}
      </ul>
      {dist.responses.length > 3 && (
        <button className="gw-btn gw-btn-secondary gw-chart-expand" onClick={() => setExpanded(!expanded)}>
          {expanded ? "Collapse" : `Show all ${dist.responses.length} responses`}
        </button>
      )}
    </div>
  );
}

/* ============================================================
   CompleteBar — Mark as complete / Completed button row
   ============================================================ */
function CompleteBar({ complete, onComplete, inline }) {
  return (
    <div className={`gw-complete-bar ${inline ? "is-inline" : ""}`}>
      {complete ? (
        <button className="gw-btn gw-btn-completed" onClick={onComplete} title="Mark as not complete">
          <span className="gw-btn-check">{gwIcons.check}</span>
          <span>Completed</span>
        </button>
      ) : (
        <button className="gw-btn gw-btn-primary" onClick={onComplete}>
          <span className="gw-btn-check">{gwIcons.check}</span>
          <span>Mark as complete</span>
        </button>
      )}
    </div>
  );
}

/* ============================================================
   PollSessionPanel — slide-in panel with session code + QR
   ============================================================ */
function QRPattern({ seed = 0 }) {
  /* Deterministic, decorative QR-like pattern. Not a scannable QR code —
     just an aesthetic stand-in. 23×23 modules with 3 finder squares. */
  const N = 23;
  const cells = [];
  /* Pseudo-random by seed */
  let s = seed * 9301 + 49297;
  const rng = () => { s = (s * 9301 + 49297) % 233280; return s / 233280; };
  for (let y = 0; y < N; y++) {
    for (let x = 0; x < N; x++) {
      const inFinder =
        (x < 7 && y < 7) ||
        (x >= N - 7 && y < 7) ||
        (x < 7 && y >= N - 7);
      if (inFinder) continue;
      if (rng() > 0.5) cells.push({ x, y });
    }
  }
  const finder = (cx, cy) => (
    <>
      <rect x={cx} y={cy} width="7" height="7" fill="currentColor" />
      <rect x={cx + 1} y={cy + 1} width="5" height="5" fill="white" />
      <rect x={cx + 2} y={cy + 2} width="3" height="3" fill="currentColor" />
    </>
  );
  return (
    <svg viewBox={`0 0 ${N} ${N}`} className="gw-qr-svg" shapeRendering="crispEdges">
      {cells.map((c, i) => <rect key={i} x={c.x} y={c.y} width="1" height="1" fill="currentColor"/>)}
      {finder(0, 0)}
      {finder(N - 7, 0)}
      {finder(0, N - 7)}
    </svg>
  );
}

if (!item || !item.session) return null;
  const s = item.session;
  /* derive a numeric seed from the session code for the QR */
  const seed = parseInt((s.code || "0").replace(/\D/g, ""), 10) || 0;

return (
    <aside className="gw-poll-panel" role="dialog" aria-label="Workshop invitation">
      <header className="gw-poll-panel-head">
        <div className="gw-poll-panel-title">
          <span className="gw-live-dot" />
          <span>Workshop invitation</span>
        </div>
        <button className="gw-icon-btn" onClick={onClose} aria-label="Close">{gwIcons.close}</button>
      </header>

<div className="gw-poll-panel-body">
        <div className="gw-session-code-block">
          <div className="gw-session-code-lbl">Session code</div>
          <div className="gw-session-code-row">
            <span className="gw-session-code">{s.code}</span>
            <button className="gw-icon-btn gw-icon-btn-tonal" onClick={() => copy("code", s.code.replace(/\s/g, ""))} title={copied === "code" ? "Copied" : "Copy code"}>
              {copied === "code" ? gwIcons.check : gwIcons.copy}
            </button>
          </div>
        </div>

<div className="gw-or">Or scan the QR code below</div>

<div className="gw-link-row">
          <span className="gw-link-text" title={s.url}>{s.url}</span>
          <button className="gw-icon-btn gw-icon-btn-tonal" onClick={() => copy("url", s.url)} title={copied === "url" ? "Copied" : "Copy link"}>
            {copied === "url" ? gwIcons.check : gwIcons.copy}
          </button>
        </div>

<div className="gw-stat-row">
          <span className="gw-stat">
            {gwIcons.users}
            <b>{s.participants}</b><span>participants</span>
          </span>
          <span className="gw-stat-sep">·</span>
          <span className="gw-stat gw-stat-success">
            {gwIcons.responded}
            <b>{s.responded}</b><span>responded</span>
          </span>
        </div>

<div className="gw-poll-panel-actions">
          {!complete && (
            <button className="gw-btn gw-btn-secondary" onClick={onMarkComplete}>
              Close poll & mark complete
            </button>
          )}
        </div>
      </div>
    </aside>
  );
}

window.gwViews = { ContentView, PollView, EvidenceView, MediaView, QuestionView, PollSessionPanel, ItemTypeIcon, gwIcons, Lightbox, computeDistribution, PollStats, RadioChart, RatingChart, BooleanChart, TextResponses, TextareaResponses };