// Sketchnote component — collapsible illustration card. View-only:
// right-click + image drag are blocked, and the lightbox image has
// pointer-events disabled so it can't be saved as a single asset.
function Sketchnote({ src, alt, caption, defaultOpen = false }) {
  const [open, setOpen] = useState(defaultOpen);
  const [lightbox, setLightbox] = useState(false);
  const blockContext = (e) => { e.preventDefault(); return false; };
  return (
    <div className="sketchnote">
      <button
        className="sk-toggle"
        onClick={() => setOpen(!open)}
        aria-expanded={open}
      >
        <span className="sk-icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M12 20h9"/>
            <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/>
          </svg>
        </span>
        <span className="sk-label">{caption || "Sketchnote"}</span>
        <span className={`sk-chev ${open ? "open" : ""}`} aria-hidden="true">▾</span>
      </button>
      {open && (
        <div className="sk-body">
          <button
            className="sk-img-btn"
            onClick={() => setLightbox(true)}
            onContextMenu={blockContext}
            aria-label="View larger"
          >
            <img
              src={src}
              alt={alt}
              loading="lazy"
              draggable="false"
              onContextMenu={blockContext}
              onDragStart={blockContext}
            />
            <span className="sk-expand">↗ tap to enlarge · view-only</span>
          </button>
        </div>
      )}
      {lightbox && (
        <div
          className="sk-lightbox"
          onClick={() => setLightbox(false)}
          onContextMenu={blockContext}
          role="dialog"
        >
          <img
            src={src}
            alt={alt}
            draggable="false"
            onContextMenu={blockContext}
            onDragStart={blockContext}
          />
          <div className="sk-view-only">View-only · not for download</div>
          <button className="sk-close" aria-label="Close">✕</button>
        </div>
      )}
    </div>
  );
}

// Privacy ribbon — small reassuring strip
function PrivacyRibbon({ compact = false }) {
  return (
    <div className={`privacy-ribbon ${compact ? "compact" : ""}`}>
      <span className="pr-icon" aria-hidden="true">
        <svg viewBox="0 0 24 24" width="14" height="14" 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>
      </span>
      <span>
        <strong>Private to you.</strong> Nothing you write is sent or shared. Answers stay on your device only.
      </span>
    </div>
  );
}

window.Sketchnote = Sketchnote;
window.PrivacyRibbon = PrivacyRibbon;