/* ============================================================
   SectionStage — flagship theatrical section panel.
   GTA-VI panel with scene/SVG background, characters that pop
   OUT of the frame, big stacked Pricedown title, CTA below.

   Structure (layered):
     .ss                          — sizing + glow (overflow visible)
       .ss-frame                  — chamfered neon-rim shape
         .ss-frame-bg             — bg + scrim + scan (clipped to shape)
       .ss-char-layer             — characters (NOT clipped) so heads
                                    can extend above the frame
       .ss-content                — text + CTA (NOT clipped)
       .ss-brackets               — corner brackets (NOT clipped)

   Props:
     variant   — "duo" | "solo-right" | "solo-left"
     shape     — "chamfer" | "slant-r" | "slant-l" | "wedge" | "strip"
     num, eyebrow, title, sub, cta
     bg        — image URL (used if backdrop is not set)
     backdrop  — { palette, skyline, palms, sun, grid } — if set,
                 SVG VCBackdrop renders instead of the bg image
     bgPos     — bg image position
     charLeft, charRight — character PNG urls
     charPop   — number 0-100 — how far the character head extends
                 ABOVE the top of the frame (default 14)
     accent    — "pink" | "cyan" | "coral" | "gold" | "violet"
     height    — panel height in px (default 460)
     align     — text alignment override
   ============================================================ */

function SectionStage({
  variant = "solo-right",
  shape = "chamfer",
  num,
  eyebrow,
  title,
  sub,
  cta,
  bg,
  backdrop,
  bgPos = "center",
  charLeft,
  charRight,
  charPop = 14,
  accent = "pink",
  height = 460,
  align,
}) {
  const ACCENT = {
    pink:   "#ff3aa3",
    cyan:   "#46e5e5",
    coral:  "#ffae6a",
    gold:   "#ffd23a",
    violet: "#a02bff",
    green:  "#5be684",
  };
  const col = ACCENT[accent] || ACCENT.pink;

  const textAlign =
    align ||
    (variant === "duo" ? "center"
      : variant === "solo-right" ? "left"
      : "right");

  return (
    <div
      className={`ss ss-${variant} ss-shape-${shape} ss-align-${textAlign}`}
      data-reveal
      style={{
        "--ss-accent": col,
        "--ss-h": `${height}px`,
        "--ss-pop": `${charPop}%`,
      }}
    >
      {/* ===== FRAME (chamfered shape) ===== */}
      <div className="ss-frame">
        <div className="ss-frame-bg">
          {backdrop ? (
            <window.VCBackdrop {...backdrop} className="ss-backdrop" />
          ) : bg ? (
            <div
              className="ss-bg"
              style={{
                backgroundImage: `url(${bg})`,
                backgroundPosition: bgPos,
              }}
            />
          ) : null}
          <div className="ss-scrim" />
          <div className="ss-wash" />
          <div className="ss-scan" />
        </div>
      </div>

      {/* ===== CHARACTERS (NOT clipped — heads pop out) ===== */}
      {(charLeft || charRight) && (
        <div className="ss-char-layer">
          {charLeft && (
            <img
              className="ss-char ss-char-left"
              src={charLeft}
              alt=""
              loading="lazy"
            />
          )}
          {charRight && (
            <img
              className="ss-char ss-char-right"
              src={charRight}
              alt=""
              loading="lazy"
            />
          )}
        </div>
      )}

      {/* ===== CORNER BRACKETS (over frame) ===== */}
      <span className="ss-bracket tl" />
      <span className="ss-bracket tr" />
      <span className="ss-bracket bl" />
      <span className="ss-bracket br" />

      {/* ===== CONTENT (over frame, not clipped) ===== */}
      <div className="ss-content">
        {(num || eyebrow) && (
          <div className="ss-meta">
            {num && <span className="ss-num">§ {num}</span>}
            {eyebrow && <span className="ss-eyebrow">{eyebrow}</span>}
          </div>
        )}
        <h2 className="ss-title">{title}</h2>
        {sub && <div className="ss-sub">{sub}</div>}
        {cta && (
          <button className="ss-cta" onClick={cta.onClick}>
            {cta.label}
          </button>
        )}
      </div>
    </div>
  );
}

window.SectionStage = SectionStage;