// About.jsx — the canvas HERO shared by the about page and every concept page:
// a freeform band built with the lookbook's canvas system, whose bottom melts
// into the page with a gradient to solid (the book's edge veils, rotated).
// The about hero lives in settings.aboutHero; a concept's lives on its series
// entry (concept.hero). Both are { els, elsMobile?, bg, height, heightM } and
// ride storage that already existed — no schema change.

// One hero band + its floating inspector. `block` is the stored blob, `onCommit`
// persists it (settings for about, saveConcept for a concept).
function SBCanvasHero({ id, label, block, onCommit }) {
  const ec = React.useContext(window.EditCtx);
  const editing = ec && ec.edit;
  const editingActive = editing && !ec.preview;
  const [live, setLive] = React.useState(null);      // uncommitted preview overlay
  const savedKey = JSON.stringify(block);
  React.useEffect(() => { setLive(null); }, [savedKey]);
  const cur = live || block;
  const [sel, setSel] = React.useState(false);

  // pseudo-look shape CanvasBlock/CanvasInspector expect ↔ the stored blob
  const toLook = (b) => ({
    id, kind: "canvas", hidden: false,
    blockMeta: {
      els: b.els || [], bg: b.bg || null,
      ...(Array.isArray(b.elsMobile) ? { elsMobile: b.elsMobile } : {}),
    },
    imgHeight: b.height == null ? null : b.height,
    imgHeightMobile: b.heightM == null ? null : b.heightM,
  });
  const applyPatch = (b, patch) => {
    const nb = { ...b };
    if (patch.blockMeta) {
      nb.els = patch.blockMeta.els || []; nb.bg = patch.blockMeta.bg || null;
      if (Array.isArray(patch.blockMeta.elsMobile)) nb.elsMobile = patch.blockMeta.elsMobile;
      else delete nb.elsMobile;
    }
    if ("imgHeight" in patch) nb.height = patch.imgHeight;
    if ("imgHeightMobile" in patch) nb.heightM = patch.imgHeightMobile;
    return nb;
  };
  const commit = (next) => { setLive(next); onCommit(next); };

  const ctx = editing ? {
    ...ec,
    selectedLookId: sel ? id : null,
    selectLook: (i) => setSel(i === id),
    saveLook: (i, patch) => commit(applyPatch(cur, patch)),
    previewLook: (i, patch) => setLive(applyPatch(cur, patch)),
    duplicateLook: () => {}, deleteLook: () => {},
  } : ec;

  return (
    <window.EditCtx.Provider value={ctx}>
      <div className={"sb-canvas-hero" + (editingActive ? " is-editing" : "")}
        onClick={editingActive ? () => setSel(true) : undefined}>
        <window.CanvasBlock look={toLook(cur)} />
      </div>
      {editingActive && sel && ReactDOM.createPortal(
        <div className="cc-insp" onClick={(e) => e.stopPropagation()}>
          <div className="cc-insp-head">
            <span>✦ {label}</span>
            <button title="close" onClick={() => setSel(false)}>×</button>
          </div>
          <window.CanvasInspector key={id} look={toLook(cur)} device={ec.device || "desktop"}
            onPatch={(i, patch) => commit(applyPatch(cur, patch))}
            onPreview={(i, patch) => setLive(applyPatch(cur, patch))}
            onUpload={ec.upload} />
        </div>,
        document.body
      )}
    </window.EditCtx.Provider>
  );
}

function AboutView({ concepts, onOpen, info, hero }) {
  const ec = React.useContext(window.EditCtx);
  const editingActive = ec && ec.edit && !ec.preview;
  const block = hero && typeof hero === "object" ? hero : { els: [], bg: null, height: null, heightM: null };
  const hasHero = (block.els && block.els.length) || block.bg;
  return (
    <section className="about-page" data-screen-label="05 About">
      {(hasHero || editingActive) && (
        <SBCanvasHero id="about-hero" label="ABOUT HERO" block={block}
          onCommit={(next) => ec.saveSetting && ec.saveSetting({ aboutHero: next })} />
      )}
      <ConceptsView concepts={concepts} onOpen={onOpen} info={info} />
    </section>
  );
}

window.SBCanvasHero = SBCanvasHero;
window.AboutView = AboutView;