// ====================================================================
// lw-studio-modules.jsx — in-chat interactive modules + stage pieces
// Rendered inside the persistent Helm rail (customCard) and the stage.
// ====================================================================
const { useState: useStateMOD, useRef: useRefMOD, useLayoutEffect: useLayoutEffectMOD } = React;

// FLIP list animation — rows slide from their old position to the new one
// whenever the ordering (or membership) changes. Attach ref={flip(key)} to each row.
function useFlipList() {
  const refs = useRefMOD(new Map());
  const prev = useRefMOD(new Map());
  const setters = useRefMOD(new Map());
  useLayoutEffectMOD(() => {
    refs.current.forEach((el, key) => {
      if (!el) return;
      const newTop = el.offsetTop;
      const oldTop = prev.current.get(key);
      if (oldTop != null && Math.abs(oldTop - newTop) > 0.5) {
        const dy = oldTop - newTop;
        el.style.transition = "none";
        el.style.transform = `translateY(${dy}px)`;
        requestAnimationFrame(() => {
          el.style.transition = "transform .26s cubic-bezier(.2,.7,.2,1)";
          el.style.transform = "";
          const clear = () => { el.style.transition = ""; el.style.transform = ""; el.removeEventListener("transitionend", clear); };
          el.addEventListener("transitionend", clear);
        });
      }
    });
    const map = new Map();
    refs.current.forEach((el, key) => { if (el) map.set(key, el.offsetTop); });
    prev.current = map;
  });
  return (key) => {
    if (!setters.current.has(key)) {
      setters.current.set(key, (el) => { if (el) refs.current.set(key, el); else refs.current.delete(key); });
    }
    return setters.current.get(key);
  };
}

// Up/down + remove icons
const IcoUp = () => <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 10l4-4 4 4"/></svg>;
const IcoDown = () => <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 6l4 4 4-4"/></svg>;
const IcoX = () => <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round"><path d="M4 4l8 8M12 4l-8 8"/></svg>;
const IcoPlus = () => <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M8 3v10M3 8h10"/></svg>;

// ── PointsModule — the prep customCard: curate the recording beats ───
function PointsModule({ bene, theme, beats, setBeats, suggestions, onWatchExample, onExpand }) {
  const [adding, setAdding] = useStateMOD(false);
  const [custom, setCustom] = useStateMOD("");
  const [drag, setDrag] = useStateMOD(null);
  const [over, setOver] = useStateMOD(null);
  const flipRef = useFlipList();
  const pool = suggestions.filter((s) => !beats.some((b) => b.t === s.t));

  const reorder = (from, to) => setBeats((arr) => { const n = [...arr]; const [m] = n.splice(from, 1); n.splice(to, 0, m); return n; });
  const endDrag = () => { if (drag != null && over != null && drag !== over) reorder(drag, over); setDrag(null); setOver(null); };
  const remove = (key) => setBeats((arr) => arr.filter((x) => x.key !== key));
  const add = (s) => { setBeats((arr) => [...arr, { ...s, key: theme.id + "_" + s.t.slice(0, 6) + "_" + arr.length }]); setAdding(false); };
  const addCustom = (text) => {
    const tt = (text || "").trim(); if (!tt) return;
    setBeats((arr) => [...arr, { t: tt, h: "Your own note — say it your way.", ex: null, alts: [], custom: true,
      key: theme.id + "_custom_" + Date.now() }]);
    setCustom("");
  };
  useLayoutEffectMOD(() => { if (adding && onExpand) onExpand(); }, [adding]);

  return (
    <div style={{ border: "1px solid var(--helm-dark-ecru)", borderRadius: 16, overflow: "hidden", background: "var(--helm-white)" }}>
      <div style={{ padding: "13px 16px", background: "var(--helm-ecru)", borderBottom: "1px solid var(--helm-dark-ecru)" }}>
        <div style={{ fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 14, color: "var(--helm-dark-green)" }}>
          Things you might say to {bene.firstName}</div>
        <div style={{ fontFamily: "var(--font-sans)", fontSize: 12.5, color: "var(--helm-dark-grey)", marginTop: 1 }}>
          {beats.length} {beats.length === 1 ? "beat" : "beats"} · drag to reorder, or remove any</div>
      </div>
      <div style={{ padding: 10, display: "flex", flexDirection: "column", gap: 7 }}>
        {beats.map((b, i) => {
          const isDrag = drag === i;
          const isOver = over === i && drag !== null && drag !== i;
          return (
          <div key={b.key}
            ref={flipRef(b.key)}
            draggable
            onDragStart={(e) => { setDrag(i); try { e.dataTransfer.effectAllowed = "move"; e.dataTransfer.setData("text/plain", String(i)); } catch (err) {} }}
            onDragOver={(e) => { e.preventDefault(); if (over !== i) setOver(i); }}
            onDrop={(e) => { e.preventDefault(); endDrag(); }}
            onDragEnd={() => { setDrag(null); setOver(null); }}
            style={{ display: "flex", alignItems: "center", gap: 9, padding: "9px 10px", borderRadius: 11, cursor: "grab",
              background: isOver ? "var(--helm-soft-chartreuse)" : "var(--helm-ecru)", opacity: isDrag ? 0.4 : 1,
              boxShadow: isOver ? "inset 0 2px 0 0 var(--helm-chartreuse-2)" : "none", transition: "background .12s ease" }}>
            <span aria-hidden style={{ color: "var(--helm-dark-grey)", flexShrink: 0, display: "flex" }}>
              <svg width="12" height="14" viewBox="0 0 12 16" fill="currentColor"><circle cx="3.5" cy="3" r="1.4"/><circle cx="8.5" cy="3" r="1.4"/><circle cx="3.5" cy="8" r="1.4"/><circle cx="8.5" cy="8" r="1.4"/><circle cx="3.5" cy="13" r="1.4"/><circle cx="8.5" cy="13" r="1.4"/></svg>
            </span>
            <span style={{ width: 22, height: 22, flexShrink: 0, borderRadius: 7, background: theme.accent + "30",
              display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-serif)",
              fontWeight: 600, fontSize: 12, color: "var(--helm-dark-green)" }}>{i + 1}</span>
            <span style={{ flex: 1, fontFamily: "var(--font-sans)", fontSize: 13.5, fontWeight: 500, lineHeight: "17px",
              color: "var(--helm-dark-green)" }}>{b.t}</span>
            <button onClick={() => remove(b.key)} className="lw-press" aria-label="Remove" style={{ ...miniBtn(false), color: "var(--helm-dark-grey)" }}><IcoX/></button>
          </div>
        );})}
        {beats.length === 0 && (
          <div style={{ padding: "14px 12px", textAlign: "center", fontFamily: "var(--font-sans)", fontSize: 13,
            color: "var(--helm-dark-grey)", border: "1px dashed var(--helm-dark-ecru)", borderRadius: 10 }}>
            Add at least one moment to record.</div>
        )}

        {/* add more */}
        {!adding && (
          <button onClick={() => setAdding(true)} className="lw-press" style={{ display: "flex", alignItems: "center", gap: 8,
            padding: "9px 10px", borderRadius: 11, border: "1px dashed var(--helm-dark-ecru)", background: "transparent",
            cursor: "pointer", color: "var(--helm-dark-green)", fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 600 }}>
            <span style={{ width: 22, height: 22, borderRadius: "50%", background: "var(--helm-ecru)", display: "flex",
              alignItems: "center", justifyContent: "center" }}><IcoPlus/></span>
            Add a moment — or write your own</button>
        )}
        {adding && (
          <div className="lw-fade" style={{ display: "flex", flexDirection: "column", gap: 8, padding: 9, borderRadius: 11,
            background: "var(--helm-ecru)" }}>
            {/* write your own */}
            <div style={{ display: "flex", gap: 6 }}>
              <input value={custom} onChange={(e) => setCustom(e.target.value)}
                onKeyDown={(e) => { if (e.key === "Enter") addCustom(custom); }}
                placeholder="Write your own…" autoFocus style={{ flex: 1, padding: "9px 12px", borderRadius: 9,
                  border: "1px solid var(--helm-dark-ecru)", background: "var(--helm-white)", fontFamily: "var(--font-sans)",
                  fontSize: 13, color: "var(--helm-dark-green)", outline: "none" }} />
              <button onClick={() => addCustom(custom)} disabled={!custom.trim()} className="lw-press" style={{ padding: "0 16px",
                borderRadius: 9, border: "none", cursor: custom.trim() ? "pointer" : "default", flexShrink: 0,
                background: custom.trim() ? "var(--helm-dark-green)" : "var(--helm-dark-ecru)", color: "var(--helm-white)",
                fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 600 }}>Add</button>
            </div>
            {pool.length > 0 && <div style={{ fontFamily: "var(--font-sans)", fontSize: 11, fontWeight: 700, letterSpacing: ".05em",
              textTransform: "uppercase", color: "var(--helm-dark-grey)", margin: "2px 2px 0" }}>Or pick a suggestion</div>}
            {pool.map((s, i) => (
              <button key={i} onClick={() => add(s)} className="lw-press" style={{ display: "flex", alignItems: "center", gap: 8,
                textAlign: "left", padding: "8px 10px", borderRadius: 9, border: "none", cursor: "pointer",
                background: "var(--helm-white)", fontFamily: "var(--font-sans)", fontSize: 13, color: "var(--helm-dark-green)" }}>
                <span style={{ color: theme.accent, display: "flex" }}><IcoPlus/></span>{s.t}</button>
            ))}
            <button onClick={() => { setAdding(false); setCustom(""); }} style={{ alignSelf: "flex-start", background: "none", border: "none",
              cursor: "pointer", color: "var(--helm-dark-grey)", fontFamily: "var(--font-sans)", fontSize: 12.5, fontWeight: 600,
              padding: "2px 4px" }}>Done adding</button>
          </div>
        )}

        {/* watch an example */}
        <button onClick={onWatchExample} className="lw-press" style={{ display: "flex", alignItems: "center", gap: 10,
          marginTop: 3, padding: 9, borderRadius: 11, border: "1px solid var(--helm-dark-ecru)", background: "var(--helm-white)",
          cursor: "pointer", textAlign: "left" }}>
          <span style={{ width: 44, height: 32, borderRadius: 7, overflow: "hidden", flexShrink: 0, position: "relative", background: "#0c160c" }}>
            <img src={theme.id === "payout" ? "lw-assets/ambient-2.jpg" : "lw-assets/ambient-1.jpg"} alt=""
              style={{ width: "100%", height: "100%", objectFit: "cover", opacity: .82 }} />
            <span style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
              <svg width="13" height="13" viewBox="0 0 24 24" fill="#fff"><path d="M7 4.5v15l13-7.5z"/></svg></span>
          </span>
          <span style={{ fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 600, color: "var(--helm-dark-green)" }}>
            Watch how someone else found the words</span>
        </button>
      </div>
    </div>
  );
}
function miniBtn(disabled) {
  return { width: 26, height: 26, borderRadius: 7, border: "none", background: "transparent",
    cursor: disabled ? "default" : "pointer", opacity: disabled ? .3 : 1, display: "flex",
    alignItems: "center", justifyContent: "center" };
}

// ── ReviewModule — the stitched-review customCard: redo a beat ───────
function ReviewModule({ beats, segClips, onRedo, onReorder, suggestions, onAddBeat, theme, onExpand, onDelete }) {
  const [drag, setDrag] = useStateMOD(null);
  const [over, setOver] = useStateMOD(null);
  const [addingR, setAddingR] = useStateMOD(false);
  const [customR, setCustomR] = useStateMOD("");
  const [confirmDel, setConfirmDel] = useStateMOD(null);   // beat index pending delete
  const flipRef = useFlipList();
  const poolR = (suggestions || []).filter((s) => !beats.some((b) => b.t === s.t));
  const tid = theme ? theme.id : "v";
  const addSug = (s) => { if (onAddBeat) onAddBeat({ ...s, key: tid + "_add_" + Date.now() }); setAddingR(false); };
  const addCus = (t) => { const tt = (t || "").trim(); if (!tt || !onAddBeat) return; onAddBeat({ t: tt, h: "Your own note — say it your way.", ex: null, alts: [], custom: true, key: tid + "_add_" + Date.now() }); setCustomR(""); setAddingR(false); };
  useLayoutEffectMOD(() => { if (addingR && onExpand) onExpand(); }, [addingR]);
  const end = () => { if (drag != null && over != null && drag !== over && onReorder) onReorder(drag, over); setDrag(null); setOver(null); };
  return (
    <div style={{ border: "1px solid var(--helm-dark-ecru)", borderRadius: 16, overflow: "hidden", background: "var(--helm-white)" }}>
      <div style={{ padding: "12px 16px", background: "var(--helm-ecru)", borderBottom: "1px solid var(--helm-dark-ecru)",
        fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 14, color: "var(--helm-dark-green)" }}>
        Your beats — drag to reorder</div>
      <div style={{ padding: 10, display: "flex", flexDirection: "column", gap: 6 }}>
        {beats.map((b, i) => {
          const isDrag = drag === i;
          const isOver = over === i && drag !== null && drag !== i;
          if (confirmDel === i) return (
            <div key={b.key || i} ref={flipRef(b.key || i)} className="lw-fade-plain"
              style={{ display: "flex", flexDirection: "column", gap: 10, padding: "11px 12px", borderRadius: 11,
                background: "#FBEDE9", border: "1px solid #E3B3A9" }}>
              <div style={{ fontFamily: "var(--font-sans)", fontSize: 13, lineHeight: "18px", color: "#7A2C20" }}>
                Delete <b>“{b.t}”</b>{segClips[i] ? " and its recording" : ""}? This can’t be undone.</div>
              <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
                <button onClick={() => setConfirmDel(null)} className="lw-press" style={{ background: "none",
                  border: "1px solid var(--helm-dark-ecru)", color: "var(--helm-dark-grey)", cursor: "pointer",
                  borderRadius: 999, padding: "5px 14px", fontFamily: "var(--font-sans)", fontSize: 12.5, fontWeight: 600 }}>Cancel</button>
                <button onClick={() => { setConfirmDel(null); onDelete && onDelete(i); }} className="lw-press" style={{ background: "#B23A2E",
                  border: "none", color: "#fff", cursor: "pointer", borderRadius: 999, padding: "5px 14px",
                  fontFamily: "var(--font-sans)", fontSize: 12.5, fontWeight: 600 }}>Delete beat</button>
              </div>
            </div>
          );
          return (
          <div key={b.key || i}
            ref={flipRef(b.key || i)}
            draggable
            onDragStart={(e) => { setDrag(i); try { e.dataTransfer.effectAllowed = "move"; e.dataTransfer.setData("text/plain", String(i)); } catch (err) {} }}
            onDragOver={(e) => { e.preventDefault(); if (over !== i) setOver(i); }}
            onDrop={(e) => { e.preventDefault(); end(); }}
            onDragEnd={() => { setDrag(null); setOver(null); }}
            style={{ display: "flex", alignItems: "center", gap: 9, padding: "9px 10px", borderRadius: 11,
              background: isOver ? "var(--helm-soft-chartreuse)" : "var(--helm-ecru)",
              opacity: isDrag ? 0.4 : 1, cursor: "grab",
              boxShadow: isOver ? "inset 0 2px 0 0 var(--helm-chartreuse-2)" : "none", transition: "background .12s ease" }}>
            <span aria-hidden style={{ color: "var(--helm-dark-grey)", flexShrink: 0, display: "flex" }}>
              <svg width="12" height="14" viewBox="0 0 12 16" fill="currentColor"><circle cx="3.5" cy="3" r="1.4"/><circle cx="8.5" cy="3" r="1.4"/><circle cx="3.5" cy="8" r="1.4"/><circle cx="8.5" cy="8" r="1.4"/><circle cx="3.5" cy="13" r="1.4"/><circle cx="8.5" cy="13" r="1.4"/></svg>
            </span>
            <span style={{ width: 22, height: 22, flexShrink: 0, borderRadius: 7, background: "var(--helm-white)",
              display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-serif)",
              fontWeight: 600, fontSize: 12, color: "var(--helm-dark-green)" }}>{i + 1}</span>
            <span style={{ flex: 1, fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 500, lineHeight: "16px",
              color: "var(--helm-dark-green)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{b.t}</span>
            <span style={{ fontFamily: "var(--font-sans)", fontSize: 12, color: "var(--helm-dark-grey)" }}>
              {segClips[i] ? (segClips[i].mock ? "✓" : lwFmt(segClips[i].dur)) : "—"}</span>
            <button onClick={() => onRedo(i)} className="lw-press" style={{ background: "none", border: "1px solid var(--helm-dark-green)",
              color: "var(--helm-dark-green)", cursor: "pointer", borderRadius: 999, padding: "4px 12px",
              fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 600 }}>Redo</button>
            {onDelete && (
              <button onClick={() => setConfirmDel(i)} disabled={beats.length <= 1} className="lw-press" aria-label="Delete beat"
                title={beats.length <= 1 ? "Keep at least one beat" : "Delete beat"} style={{ background: "none",
                  border: "1px solid var(--helm-dark-ecru)", color: "var(--helm-dark-grey)", flexShrink: 0,
                  cursor: beats.length <= 1 ? "default" : "pointer", opacity: beats.length <= 1 ? 0.4 : 1, borderRadius: 999,
                  width: 28, height: 28, display: "flex", alignItems: "center", justifyContent: "center" }}>
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 6h18M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2m2 0v14a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6"/><path d="M10 11v6M14 11v6"/></svg>
              </button>
            )}
          </div>
        );})}
        {/* add a beat to record */}
        {!addingR && (
          <button onClick={() => setAddingR(true)} className="lw-press" style={{ display: "flex", alignItems: "center", gap: 8,
            padding: "9px 10px", borderRadius: 11, border: "1px dashed var(--helm-dark-ecru)", background: "transparent",
            cursor: "pointer", color: "var(--helm-dark-green)", fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 600 }}>
            <span style={{ width: 22, height: 22, borderRadius: "50%", background: "var(--helm-ecru)", display: "flex",
              alignItems: "center", justifyContent: "center" }}>
              <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M8 3v10M3 8h10"/></svg></span>
            Add a beat — record one more</button>
        )}
        {addingR && (
          <div className="lw-fade" style={{ display: "flex", flexDirection: "column", gap: 8, padding: 9, borderRadius: 11, background: "var(--helm-ecru)" }}>
            <div style={{ display: "flex", gap: 6 }}>
              <input value={customR} onChange={(e) => setCustomR(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") addCus(customR); }}
                placeholder="Write your own…" autoFocus style={{ flex: 1, padding: "9px 12px", borderRadius: 9,
                  border: "1px solid var(--helm-dark-ecru)", background: "var(--helm-white)", fontFamily: "var(--font-sans)",
                  fontSize: 13, color: "var(--helm-dark-green)", outline: "none" }} />
              <button onClick={() => addCus(customR)} disabled={!customR.trim()} className="lw-press" style={{ padding: "0 16px",
                borderRadius: 9, border: "none", cursor: customR.trim() ? "pointer" : "default", flexShrink: 0,
                background: customR.trim() ? "var(--helm-dark-green)" : "var(--helm-dark-ecru)", color: "var(--helm-white)",
                fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 600 }}>Add</button>
            </div>
            {poolR.length > 0 && <div style={{ fontFamily: "var(--font-sans)", fontSize: 11, fontWeight: 700, letterSpacing: ".05em",
              textTransform: "uppercase", color: "var(--helm-dark-grey)", margin: "2px 2px 0" }}>Or pick a suggestion</div>}
            {poolR.map((s, i) => (
              <button key={i} onClick={() => addSug(s)} className="lw-press" style={{ display: "flex", alignItems: "center", gap: 8,
                textAlign: "left", padding: "8px 10px", borderRadius: 9, border: "none", cursor: "pointer",
                background: "var(--helm-white)", fontFamily: "var(--font-sans)", fontSize: 13, color: "var(--helm-dark-green)" }}>
                <span style={{ color: theme ? theme.accent : "var(--helm-dark-green)", display: "flex" }}>
                  <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M8 3v10M3 8h10"/></svg></span>{s.t}</button>
            ))}
            <button onClick={() => { setAddingR(false); setCustomR(""); }} style={{ alignSelf: "flex-start", background: "none", border: "none",
              cursor: "pointer", color: "var(--helm-dark-grey)", fontFamily: "var(--font-sans)", fontSize: 12.5, fontWeight: 600, padding: "2px 4px" }}>Cancel</button>
          </div>
        )}
      </div>
    </div>
  );
}

function HowItWorksCard({ theme }) {
  const steps = [
    { t: "Record a beat", d: "One short thought — about 20 seconds.", k: "rec" },
    { t: "Watch it back", d: "See each take right away.", k: "play" },
    { t: "Re-record anything", d: "Redo a single beat, not the whole video.", k: "redo" },
  ];
  const ico = (k) => k === "rec" ? <span style={{ width: 13, height: 13, borderRadius: "50%", background: "rgb(232,7,7)" }} />
    : k === "play" ? <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M7 4.5v15l13-7.5z"/></svg>
    : <svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M3 8a5 5 0 1 0 1.5-3.5"/><path d="M3 2.5v3h3"/></svg>;
  return (
    <div style={{ border: "1px solid var(--helm-dark-ecru)", borderRadius: 16, overflow: "hidden", background: "var(--helm-white)" }}>
      <div style={{ padding: "12px 16px", background: "var(--helm-ecru)", borderBottom: "1px solid var(--helm-dark-ecru)",
        fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 14, color: "var(--helm-dark-green)" }}>How the studio works</div>
      <div style={{ padding: 8 }}>
        {steps.map((s, i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 12, padding: "10px",
            borderTop: i > 0 ? "1px solid var(--helm-ecru)" : "none" }}>
            <span style={{ width: 32, height: 32, flexShrink: 0, borderRadius: 9, background: (theme ? theme.accent : "#9888BF") + "2e",
              display: "flex", alignItems: "center", justifyContent: "center", color: "var(--helm-dark-green)" }}>{ico(s.k)}</span>
            <div>
              <div style={{ fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 14, color: "var(--helm-dark-green)" }}>{s.t}</div>
              <div style={{ fontFamily: "var(--font-sans)", fontSize: 12.5, color: "var(--helm-dark-grey)" }}>{s.d}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { PointsModule, ReviewModule, HowItWorksCard });