/*  === monstrance-shared.jsx ===
    Shared visual primitives — Cloud, PedestalCloud, CloudComposition, sparkle/sun, topbar, icon glyphs.
    Loaded as <script type="text/babel" src="js/monstrance-shared.jsx"></script>.
    Cross-file references work because babel-standalone evaluates each script in
    the document's global scope after compile; top-level const/let/function decls
    are visible to subsequent scripts loaded in this order.
*/

const { useState, useEffect, useRef, useCallback } = React;

function Cloud({ className, style }) {
  return (
    <svg
      className={`cloud ${className || ""}`}
      style={style}
      viewBox="0 0 220 105"
      fill="currentColor"
      aria-hidden="true"
    >
      <path
        d="M 22 78 C 4 78, 4 55, 23 53 C 22 36, 42 27, 57 35 C 66 13, 99 10, 112 31 C 128 12, 164 19, 166 47 C 190 43, 210 55, 208 75 C 205 96, 176 98, 157 91 C 134 105, 98 101, 82 91 C 58 101, 34 96, 22 78 Z"
        stroke="rgba(42,26,14,0.16)"
        strokeWidth="2"
        strokeLinejoin="round"
      />
      <path
        className="cloud-highlight"
        d="M 41 52 C 49 37, 67 38, 76 44 M 93 35 C 111 25, 131 32, 138 47 M 148 56 C 166 50, 184 57, 190 70"
        stroke="rgba(255,255,255,0.95)"
        strokeWidth="7"
        strokeLinecap="round"
        fill="none"
      />
      <path
        className="cloud-warmth"
        d="M 26 78 C 55 88, 86 78, 113 85 C 141 92, 172 86, 203 76 C 198 95, 170 98, 157 91 C 134 105, 98 101, 82 91 C 58 101, 34 96, 26 78 Z"
        fill="rgba(220, 183, 119, 0.5)"
      />
    </svg>
  );
}

function PedestalCloud() {
  return (
    <svg
      className="cloud-pedestal"
      viewBox="0 0 900 260"
      fill="var(--paper)"
      aria-hidden="true"
    >
      <path
        d="M 40 200 Q 0 200, 30 168 Q 0 142, 50 130 Q 50 96, 110 102 Q 130 64, 190 80 Q 220 40, 280 64 Q 320 30, 380 60 Q 430 26, 490 58 Q 540 30, 600 64 Q 660 36, 710 76 Q 770 70, 800 110 Q 870 110, 870 150 Q 900 170, 860 200 Q 820 230, 760 220 Q 700 244, 620 226 Q 540 246, 460 226 Q 380 248, 300 228 Q 220 246, 150 222 Q 80 240, 40 200 Z"
        stroke="rgba(42,26,14,0.15)"
        strokeWidth="1.8"
        strokeLinejoin="round"
      />
      <path
        d="M 110 110 Q 200 86, 280 80 Q 360 70, 460 78 Q 560 70, 660 82 Q 740 92, 800 116"
        stroke="rgba(255, 248, 220, 0.9)"
        strokeWidth="6"
        fill="none"
        strokeLinecap="round"
        opacity="0.7"
      />
    </svg>
  );
}

function CloudComposition({ showSparkles }) {
  return (
    <React.Fragment>
      <div className="cloud-layer behind" aria-hidden="true">
        {CLOUDS_DISTANT.map((c, i) => (
          <Cloud
            key={"d" + i}
            className="distant"
            style={cloudStyle(c)}
          />
        ))}
        {CLOUDS_WING_LEFT.map((c, i) => (
          <Cloud key={"wl" + i} className="soft" style={cloudStyle(c)} />
        ))}
        {CLOUDS_WING_RIGHT.map((c, i) => (
          <Cloud key={"wr" + i} className="soft" style={cloudStyle(c)} />
        ))}

        {showSparkles && (
          <React.Fragment>
            {SPARKLES.map((s, i) => (
              <svg
                key={i}
                className="sparkle"
                style={{
                  left: s.x + "%",
                  top: s.y + "%",
                  animationDelay: s.d + "s",
                }}
                viewBox="0 0 24 24"
                fill="currentColor"
              >
                <path d="M12 0l2 9 9 3-9 3-2 9-2-9-9-3 9-3z" />
              </svg>
            ))}
            <svg className="doodle-bird" viewBox="0 0 60 30" fill="none">
              <path
                d="M2 18 Q 12 4, 22 14 Q 32 24, 42 12 Q 52 2, 58 14"
                stroke="currentColor"
                strokeWidth="2.2"
                strokeLinecap="round"
                fill="none"
              />
            </svg>
          </React.Fragment>
        )}
      </div>

      <PedestalCloud />

      <div className="cloud-layer front" aria-hidden="true">
        {CLOUDS_FRONT.map((c, i) => (
          <Cloud
            key={"f" + i}
            className={c.soft ? "soft" : ""}
            style={cloudStyle(c)}
          />
        ))}
      </div>
    </React.Fragment>
  );
}

function SpeakerIcon({ on }) {
  return (
    <svg
      width="18"
      height="18"
      viewBox="0 0 24 24"
      fill="none"
      aria-hidden="true"
    >
      <path
        d="M4 9h4l5-4v14l-5-4H4z"
        fill="currentColor"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinejoin="round"
      />
      {on && (
        <g
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          fill="none"
        >
          <path d="M16 9c1.2 1 1.2 5 0 6" />
          <path d="M19 7c2.5 2 2.5 8 0 10" />
        </g>
      )}
    </svg>
  );
}
function BookIcon() {
  return (
    <svg
      width="18"
      height="18"
      viewBox="0 0 24 24"
      fill="none"
      aria-hidden="true"
    >
      <path
        d="M3 5c4-2 7-1 9 1 2-2 5-3 9-1v14c-4-2-7-1-9 1-2-2-5-3-9-1V5z"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinejoin="round"
        fill="rgba(255,255,255,0.15)"
      />
      <path d="M12 6v14" stroke="currentColor" strokeWidth="2" />
    </svg>
  );
}
function HandsIcon() {
  return (
    <svg
      width="18"
      height="18"
      viewBox="0 0 24 24"
      fill="none"
      aria-hidden="true"
    >
      <path
        d="M7 13V6a1.5 1.5 0 1 1 3 0v5M10 11V4.5a1.5 1.5 0 1 1 3 0V11M13 11V5.5a1.5 1.5 0 1 1 3 0V13M16 9a1.5 1.5 0 1 1 3 0v6a6 6 0 0 1-12 0v-2"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function TopBar({
  readAloud,
  onToggleReadAloud,
  onShowAudioSetup,
  palette,
  onCyclePalette,
}) {
  const paletteLabel = (
    PALETTES.find((p) => p.value === palette) || PALETTES[0]
  ).label;
  return (
    <header className="topbar">
      <a className="brand" href="index.html">
        <span className="dot">✦</span>
        Catholic Kids
      </a>
      <div className="topbar-right">
        <button
          className="pill-btn"
          onClick={onCyclePalette}
          title="Switch color palette"
          aria-label={`Palette: ${paletteLabel}. Click to change.`}
        >
          <span className="palette-swatch" aria-hidden="true"></span>
          {paletteLabel}
        </button>
        <button
          className={`pill-btn ${readAloud ? "is-on" : ""}`}
          onClick={onToggleReadAloud}
          aria-pressed={readAloud}
          title="Play Grok narration clips"
        >
          <SpeakerIcon on={readAloud} />
          Grok audio
        </button>
        <button
          className="pill-btn"
          onClick={onShowAudioSetup}
          title="Show Grok audio setup"
        >
          Audio setup
        </button>
      </div>
    </header>
  );
}