/* K-Lab Releases — Album art (1500×1500) + Video thumbnail (1920×1080) templates.
   Each component accepts props so the studio.html form can drive them programmatically.
   Shared primitives (KLabStamp, RingBg, Ticker) come from ../social/Flyers.jsx — load it first.
*/

const ACCENTS = {
  magenta: {
    color: "var(--neon-magenta)",
    deep: "var(--neon-magenta-deep, #a200d6)",
    glow: "var(--glow-magenta)",
  },
  cyan: {
    color: "var(--neon-cyan)",
    deep: "#007a8a",
    glow: "0 0 24px 0 rgba(0,231,255,0.4)",
  },
  green: {
    color: "var(--neon-green)",
    deep: "#007a44",
    glow: "0 0 24px 0 rgba(0,255,133,0.4)",
  },
  red: {
    color: "var(--neon-red, #ff2a2a)",
    deep: "#7a0000",
    glow: "0 0 24px 0 rgba(255,42,42,0.45)",
  },
};

// Photo layer with duotone screen-blend overlay. The screenshot reads readable but is
// pulled into the brand palette so 22 disparate DJ photos still feel like one series.
//
// `bgSize` defaults to 'cover' for backwards compat. Studio passes an explicit
// pixel-pair string (e.g. "2666px 1500px") computed from the source image's
// natural dimensions × cover-scale × user zoom, so the Y position slider has
// room to move on landscape-into-square crops where 'cover' alone fits Y tight.
const DuotonePhoto = ({
  src,
  accent = "magenta",
  position = "50% 35%",
  bgSize = "cover",
  intensity = 0.55,
}) => {
  const a = ACCENTS[accent] || ACCENTS.magenta;
  return (
    <>
      <div
        style={{
          position: "absolute",
          inset: 0,
          background: "#000",
          backgroundImage: src ? `url(${src})` : "none",
          backgroundSize: bgSize,
          backgroundPosition: position,
          backgroundRepeat: "no-repeat",
          filter: "grayscale(1) contrast(1.18) brightness(0.82)",
        }}
      />
      <div
        style={{
          position: "absolute",
          inset: 0,
          background: `linear-gradient(180deg, ${a.color} 0%, ${a.deep} 100%)`,
          mixBlendMode: "screen",
          opacity: intensity,
        }}
      />
      <div
        style={{
          position: "absolute",
          inset: 0,
          background: "rgba(0,0,0,0.35)",
        }}
      />
    </>
  );
};

// Photo with no duotone — straight grayscale + slight grain. Useful when the image
// itself is already on-brand (e.g. magenta neon set).
const RawPhoto = ({
  src,
  position = "50% 35%",
  bgSize = "cover",
  desaturate = 0.4,
}) => (
  <div
    style={{
      position: "absolute",
      inset: 0,
      background: "#000",
      backgroundImage: src ? `url(${src})` : "none",
      backgroundSize: bgSize,
      backgroundPosition: position,
      backgroundRepeat: "no-repeat",
      filter: `grayscale(${desaturate}) contrast(1.08)`,
    }}
  />
);

// Placeholder shown when no photo has been uploaded yet.
const PhotoPlaceholder = ({ label = "DROP A SET SCREENSHOT HERE" }) => (
  <div
    style={{
      position: "absolute",
      inset: 0,
      background:
        "repeating-linear-gradient(45deg, #0a0a10, #0a0a10 24px, #000 24px, #000 48px)",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
    }}
  >
    <div
      className="t-mono"
      style={{ color: "var(--fg-3)", textAlign: "center", padding: 24 }}
    >
      [ {label} ]
    </div>
  </div>
);

// PatternBg — brand pattern used in place of the photo when the NO PHOTO effect
// is on. Gives the "text + effects only" glitch look (the happy-accident render
// where the screenshot failed to load) and doubles as a clean playlist / Discord
// thumbnail base. Rings + accent glow + a faint halftone, no photo dependency.
const PatternBg = ({ accent = "magenta" }) => {
  const a = ACCENTS[accent] || ACCENTS.magenta;
  return (
    <div
      style={{
        position: "absolute",
        inset: 0,
        background: "#000",
        overflow: "hidden",
      }}
    >
      <div
        className="bg-rings"
        style={{ position: "absolute", inset: "-25%", opacity: 0.45 }}
      />
      <div
        style={{
          position: "absolute",
          inset: 0,
          background: `radial-gradient(ellipse at 50% 32%, ${a.color}66 0%, transparent 62%)`,
        }}
      />
      <div
        className="bg-halftone"
        style={{
          position: "absolute",
          inset: 0,
          opacity: 0.22,
          mixBlendMode: "screen",
          backgroundSize: "10px 10px",
        }}
      />
      <div
        style={{
          position: "absolute",
          inset: 0,
          background: "rgba(0,0,0,0.32)",
        }}
      />
    </div>
  );
};

// FxLayer — optional, stackable overlays driven by the studio's effect toggles.
// Sits above the photo (or PatternBg) but below the text, so it differentiates
// the treatment without hurting type legibility. Each flag is independent.
const FxLayer = ({ fx = {}, accent = "magenta" }) => {
  const a = ACCENTS[accent] || ACCENTS.magenta;
  return (
    <>
      {fx.halftone && (
        <div
          className="bg-halftone"
          style={{
            position: "absolute",
            inset: 0,
            opacity: 0.62,
            mixBlendMode: "screen",
            backgroundSize: "13px 13px",
          }}
        />
      )}
      {fx.gradient && (
        <div
          style={{
            position: "absolute",
            inset: 0,
            mixBlendMode: "overlay",
            opacity: 0.85,
            background: `linear-gradient(135deg, ${a.color} 0%, transparent 42%, transparent 58%, var(--neon-cyan) 100%)`,
          }}
        />
      )}
    </>
  );
};

// ============================================================
// ALBUM ART · 1500×1500
// ============================================================

// AlbumA — "DISCOVERY STAMP" — photo full-bleed, DJ name huge across bottom, series stamp top-right.
// Closest to your reference vibe. Reads great as a thumbnail in Spotify/Apple Music.
const AlbumA = ({
  dj = "FINAL DRIVE!",
  series = "DISCOVERY 001",
  date = "5.13.26",
  tag = "TECHNO · 128 BPM",
  url = "@K-LAB",
  photo,
  photoPos = "50% 35%",
  bgSize = "cover",
  accent = "magenta",
  fx = {},
}) => {
  const a = ACCENTS[accent] || ACCENTS.magenta;
  return (
    <div
      style={{
        width: 1500,
        height: 1500,
        background: "#000",
        position: "relative",
        overflow: "hidden",
        fontFamily: "var(--font-body)",
        color: "#fff",
      }}
    >
      {fx.noPhoto ? (
        <PatternBg accent={accent} />
      ) : photo ? (
        <DuotonePhoto
          src={photo}
          accent={accent}
          position={photoPos}
          bgSize={bgSize}
          intensity={0.5}
        />
      ) : (
        <PhotoPlaceholder />
      )}
      <div
        className="bg-scanlines"
        style={{ position: "absolute", inset: 0, opacity: 0.35 }}
      />
      <FxLayer fx={fx} accent={accent} />

      {/* Bottom black gradient so the type sits cleanly */}
      <div
        style={{
          position: "absolute",
          left: 0,
          right: 0,
          bottom: 0,
          height: 680,
          background:
            "linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.82) 55%, #000 100%)",
        }}
      />

      {/* Top mono rail */}
      <div
        style={{
          position: "absolute",
          top: 56,
          left: 64,
          right: 64,
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
        }}
      >
        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <KLabStamp size={48} color={a.color} />
          <div>
            <div className="t-mono" style={{ color: a.color, fontSize: 32 }}>
              // K-LAB DISCOVERY
            </div>
            <div
              className="t-jp"
              style={{
                fontSize: 24,
                color: "var(--fg-3)",
                letterSpacing: "0.2em",
                marginTop: 2,
              }}
            >
              サウンド・エクスペリメント
            </div>
          </div>
        </div>
        <div style={{ textAlign: "right" }}>
          <div
            className="t-tech"
            style={{ fontSize: 42, color: "#fff", letterSpacing: "0.18em" }}
          >
            {series}
          </div>
          <div
            className="t-mono"
            style={{ color: "var(--fg-2)", fontSize: 34, marginTop: 4 }}
          >
            {date}
          </div>
        </div>
      </div>

      {/* DJ name — anchored bottom */}
      <div style={{ position: "absolute", left: 64, right: 64, bottom: 80 }}>
        <div
          className="t-mono"
          style={{
            color: a.color,
            fontSize: 34,
            marginBottom: 18,
            display: "flex",
            alignItems: "center",
            gap: 12,
          }}
        >
          <span
            style={{
              display: "inline-block",
              width: 44,
              height: 2,
              background: a.color,
            }}
          />
          // LIVE FROM K-WAY'S CAR LOUNGE
        </div>
        <div
          className="t-d1 fx-aberration"
          style={{
            fontSize: "min(180px, calc(180px * 1))",
            lineHeight: 0.88,
            letterSpacing: "-0.02em",
          }}
        >
          {dj}
        </div>
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "flex-end",
            marginTop: 22,
            borderTop: "1px solid var(--line-strong)",
            paddingTop: 16,
          }}
        >
          <div
            className="t-mono"
            style={{ color: "var(--fg-2)", fontSize: 38 }}
          >
            {tag}
          </div>
          {url && (
            <div
              className="t-mono"
              style={{ color: "var(--fg-2)", fontSize: 38 }}
            >
              {url} ↗
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

// AlbumB — "OUTLINE PORTRAIT" — Halftone duotone behind, centered outline wordmark.
// Good when the photo is busy and you want the name to read as a stencil.
const AlbumB = ({
  dj = "FINAL DRIVE!",
  series = "DISCOVERY 001",
  date = "5.13.26",
  tag = "TECHNO · 128 BPM",
  photo,
  photoPos = "50% 35%",
  bgSize = "cover",
  accent = "magenta",
  fx = {},
}) => {
  const a = ACCENTS[accent] || ACCENTS.magenta;
  return (
    <div
      style={{
        width: 1500,
        height: 1500,
        background: "#000",
        position: "relative",
        overflow: "hidden",
        fontFamily: "var(--font-body)",
        color: "#fff",
      }}
    >
      {fx.noPhoto ? (
        <PatternBg accent={accent} />
      ) : photo ? (
        <DuotonePhoto
          src={photo}
          accent={accent}
          position={photoPos}
          bgSize={bgSize}
          intensity={0.7}
        />
      ) : (
        <PhotoPlaceholder />
      )}
      <div
        className="bg-halftone"
        style={{
          position: "absolute",
          inset: 0,
          opacity: 0.5,
          mixBlendMode: "multiply",
        }}
      />
      <FxLayer fx={fx} accent={accent} />

      <div
        style={{
          position: "absolute",
          inset: 64,
          border: `1px solid ${a.color}`,
          padding: 32,
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
        }}
      >
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "flex-start",
          }}
        >
          <div
            className="t-mono"
            style={{
              color: a.color,
              fontSize: 34,
              background: "rgba(0,0,0,0.7)",
              padding: "6px 14px",
            }}
          >
            [K-LAB / DISCOVERY / SETS]
          </div>
          <div
            className="t-mono"
            style={{
              color: a.color,
              fontSize: 34,
              background: "rgba(0,0,0,0.7)",
              padding: "6px 14px",
            }}
          >
            {series}
          </div>
        </div>

        <div style={{ textAlign: "center" }}>
          <div
            className="t-tech anim-flicker"
            style={{ fontSize: 36, color: a.color, letterSpacing: "0.2em" }}
          >
            ▲ SET RECORDING
          </div>
          <div
            className="t-d1"
            style={{
              fontSize: 224,
              lineHeight: 0.9,
              marginTop: 18,
              color: "#fff",
            }}
          >
            {dj}
          </div>
          <div
            className="t-jp"
            style={{
              fontSize: 28,
              marginTop: 16,
              color: a.color,
              letterSpacing: "0.24em",
            }}
          >
            サウンド・エクスペリメント
          </div>
        </div>

        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "flex-end",
          }}
        >
          <div style={{ background: "rgba(0,0,0,0.7)", padding: "10px 16px" }}>
            <div
              className="t-mono"
              style={{
                color: "var(--neon-green)",
                fontSize: 34,
                marginBottom: 4,
              }}
            >
              ● REC · {date}
            </div>
            <div
              className="t-mono"
              style={{ color: "var(--fg-2)", fontSize: 32 }}
            >
              {tag}
            </div>
          </div>
          <KLabStamp size={64} color={a.color} />
        </div>
      </div>
    </div>
  );
};

// AlbumC — "BANNER SLASH" — photo top, diagonal magenta banner middle, DJ name below.
// References the Tuner Stencil flyer. Hard, brutalist, K-Ways automotive vibe.
const AlbumC = ({
  dj = "FINAL DRIVE!",
  series = "DISCOVERY 001",
  date = "5.13.26",
  tag = "TECHNO · 128 BPM",
  photo,
  photoPos = "50% 30%",
  bgSize = "cover",
  accent = "magenta",
  fx = {},
}) => {
  const a = ACCENTS[accent] || ACCENTS.magenta;
  return (
    <div
      style={{
        width: 1500,
        height: 1500,
        background: "#000",
        position: "relative",
        overflow: "hidden",
        fontFamily: "var(--font-body)",
        color: "#fff",
      }}
    >
      {/* Photo zone — top 56% */}
      <div
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          right: 0,
          height: 840,
          overflow: "hidden",
        }}
      >
        {fx.noPhoto ? (
          <PatternBg accent={accent} />
        ) : photo ? (
          <RawPhoto
            src={photo}
            position={photoPos}
            bgSize={bgSize}
            desaturate={0.3}
          />
        ) : (
          <PhotoPlaceholder />
        )}
        <FxLayer fx={fx} accent={accent} />
        <div
          style={{
            position: "absolute",
            inset: 0,
            background: `linear-gradient(180deg, transparent 50%, #000 100%)`,
          }}
        />
        <div
          className="bg-scanlines"
          style={{ position: "absolute", inset: 0, opacity: 0.5 }}
        />
      </div>

      {/* Top mono rail — accent stripe so the label stays legible over the photo */}
      <div
        style={{
          position: "absolute",
          top: 56,
          left: 64,
          right: 64,
          display: "flex",
          justifyContent: "space-between",
        }}
      >
        <div
          className="t-mono"
          style={{
            color: "#000",
            background: a.color,
            fontSize: 24,
            padding: "7px 16px",
            boxShadow: a.glow,
          }}
        >
          // K-LAB DISCOVERY · LIVE SET
        </div>
      </div>

      {/* Diagonal banner */}
      <div
        style={{
          position: "absolute",
          top: 760,
          left: -60,
          right: -60,
          height: 140,
          background: a.color,
          transform: "rotate(-2.5deg)",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          boxShadow: a.glow,
          zIndex: 2,
          overflow: "hidden",
        }}
      >
        <div
          className="t-speed"
          style={{
            fontSize: 112,
            color: "#000",
            lineHeight: 1,
            whiteSpace: "nowrap",
            letterSpacing: "0.02em",
          }}
        >
          K-LAB {series}
        </div>
      </div>

      {/* DJ name + meta */}
      <div style={{ position: "absolute", top: 980, left: 64, right: 64 }}>
        <div
          className="t-d1"
          style={{ fontSize: 180, lineHeight: 0.92, letterSpacing: "-0.02em" }}
        >
          <span className="fx-aberration">{dj}</span>
        </div>
        <div
          className="t-tech"
          style={{
            fontSize: 40,
            marginTop: 18,
            color: a.color,
            letterSpacing: "0.18em",
          }}
        >
          {tag}
        </div>
      </div>

      {/* Bottom footer */}
      <div
        style={{
          position: "absolute",
          bottom: 56,
          left: 64,
          right: 64,
          display: "flex",
          justifyContent: "space-between",
          alignItems: "flex-end",
          borderTop: "1px solid var(--line-strong)",
          paddingTop: 16,
        }}
      >
        <div
          className="t-mono"
          style={{ color: "var(--neon-green)", fontSize: 24 }}
        >
          ● REC · {date} · K-WAY'S CAR LOUNGE
        </div>
        <KLabStamp size={48} color={a.color} />
      </div>
    </div>
  );
};

// ============================================================
// VIDEO THUMBNAIL · 1920×1080
// ============================================================

// ThumbA — "ABERRATION HERO" — Photo full-bleed, scanlines, chromatic-split DJ name center.
// User's pick: based on the Glitch Release flyer. Reads at YouTube thumbnail size.
const ThumbA = ({
  dj = "FINAL DRIVE!",
  series = "DISCOVERY 001",
  date = "5.13.26",
  tag = "128 BPM · TECHNO",
  photo,
  photoPos = "50% 35%",
  bgSize = "cover",
  accent = "magenta",
  fx = {},
}) => {
  const a = ACCENTS[accent] || ACCENTS.magenta;
  return (
    <div
      style={{
        width: 1920,
        height: 1080,
        background: "#000",
        position: "relative",
        overflow: "hidden",
        fontFamily: "var(--font-body)",
        color: "#fff",
      }}
    >
      {fx.noPhoto ? (
        <PatternBg accent={accent} />
      ) : photo ? (
        <DuotonePhoto
          src={photo}
          accent={accent}
          position={photoPos}
          bgSize={bgSize}
          intensity={0.5}
        />
      ) : (
        <PhotoPlaceholder />
      )}
      <div
        className="bg-scanlines"
        style={{ position: "absolute", inset: 0, opacity: 0.45 }}
      />
      <FxLayer fx={fx} accent={accent} />
      <div
        style={{
          position: "absolute",
          inset: 0,
          background:
            "radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(0,0,0,0.55) 80%)",
        }}
      />

      {/* Top mono rail */}
      <div
        style={{
          position: "absolute",
          top: 36,
          left: 56,
          right: 56,
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
        }}
      >
        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <KLabStamp size={44} color={a.color} />
          <div>
            <div className="t-mono" style={{ color: a.color, fontSize: 26 }}>
              // K-LAB DISCOVERY
            </div>
            <div
              className="t-jp"
              style={{
                fontSize: 20,
                color: "var(--fg-3)",
                letterSpacing: "0.2em",
              }}
            >
              サウンド・エクスペリメント
            </div>
          </div>
        </div>
        <div
          className="t-mono anim-flicker"
          style={{ color: "var(--neon-red, #ff2a2a)", fontSize: 24 }}
        >
          ● LIVE SET
        </div>
      </div>

      {/* Hero stack — centered */}
      <div
        style={{
          position: "absolute",
          inset: 0,
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          textAlign: "center",
          padding: "0 80px",
        }}
      >
        <div
          className="t-tech"
          style={{
            fontSize: 40,
            color: a.color,
            letterSpacing: "0.2em",
            marginBottom: 22,
          }}
        >
          {series}
        </div>
        <div
          className="t-d1 fx-aberration-strong"
          style={{ fontSize: 220, lineHeight: 0.86, letterSpacing: "-0.025em" }}
        >
          {dj}
        </div>
        <div
          className="t-tech"
          style={{
            fontSize: 38,
            marginTop: 22,
            color: "#fff",
            letterSpacing: "0.16em",
          }}
        >
          {tag}
        </div>
      </div>

      {/* Bottom rail */}
      <div
        style={{
          position: "absolute",
          bottom: 36,
          left: 56,
          right: 56,
          display: "flex",
          justifyContent: "space-between",
        }}
      >
        <div
          className="t-mono"
          style={{ color: "var(--neon-green)", fontSize: 26 }}
        >
          ● {date} · K-WAY'S CAR LOUNGE · LAS VEGAS
        </div>
        <div className="t-mono" style={{ color: a.color, fontSize: 26 }}>
          WATCH FULL SET →
        </div>
      </div>
    </div>
  );
};

// ThumbB — "SPLIT" — type stack left 40%, photo right 60%.
// Good when you want the DJ name to be legible at very small sizes.
const ThumbB = ({
  dj = "FINAL DRIVE!",
  series = "DISCOVERY 001",
  date = "5.13.26",
  tag = "128 BPM · TECHNO",
  photo,
  photoPos = "50% 35%",
  bgSize = "cover",
  accent = "magenta",
  fx = {},
}) => {
  const a = ACCENTS[accent] || ACCENTS.magenta;
  return (
    <div
      style={{
        width: 1920,
        height: 1080,
        background: "#000",
        position: "relative",
        overflow: "hidden",
        fontFamily: "var(--font-body)",
        color: "#fff",
      }}
    >
      {/* Photo on right 60% */}
      <div
        style={{
          position: "absolute",
          top: 0,
          right: 0,
          bottom: 0,
          width: "60%",
          overflow: "hidden",
        }}
      >
        {fx.noPhoto ? (
          <PatternBg accent={accent} />
        ) : photo ? (
          <DuotonePhoto
            src={photo}
            accent={accent}
            position={photoPos}
            bgSize={bgSize}
            intensity={0.45}
          />
        ) : (
          <PhotoPlaceholder label="" />
        )}
        <div
          className="bg-halftone"
          style={{
            position: "absolute",
            inset: 0,
            opacity: 0.4,
            mixBlendMode: "screen",
          }}
        />
        <FxLayer fx={fx} accent={accent} />
        <div
          style={{
            position: "absolute",
            top: 0,
            bottom: 0,
            left: 0,
            width: 220,
            background: "linear-gradient(90deg, #000 0%, transparent 100%)",
          }}
        />
      </div>

      {/* Top ticker, full width */}
      <div style={{ position: "absolute", top: 0, left: 0, right: 0 }}>
        <Ticker
          items={[series, "LIVE SET", dj, "K-WAYS", date]}
          color={a.color}
          dur={28}
        />
      </div>

      {/* Type stack on left */}
      <div
        style={{
          position: "absolute",
          top: 76,
          left: 56,
          width: "46%",
          bottom: 56,
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
        }}
      >
        <div>
          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: 12,
              marginBottom: 18,
            }}
          >
            <KLabStamp size={36} color={a.color} />
            <div className="t-mono" style={{ color: a.color, fontSize: 26 }}>
              // K-LAB DISCOVERY
            </div>
          </div>
          <div
            className="t-tech"
            style={{
              fontSize: 38,
              color: "var(--fg-2)",
              letterSpacing: "0.2em",
            }}
          >
            {series}
          </div>
          <div
            className="t-d1 fx-aberration"
            style={{
              fontSize: 160,
              lineHeight: 0.88,
              letterSpacing: "-0.025em",
              marginTop: 18,
            }}
          >
            {dj}
          </div>
          <div
            className="t-tech"
            style={{
              fontSize: 36,
              color: a.color,
              letterSpacing: "0.18em",
              marginTop: 14,
            }}
          >
            {tag}
          </div>
        </div>
        <div style={{ borderTop: `1px solid ${a.color}`, paddingTop: 14 }}>
          <div
            className="t-mono"
            style={{ color: "var(--neon-green)", fontSize: 26 }}
          >
            ● REC · {date}
          </div>
          <div
            className="t-mono"
            style={{ color: "var(--fg-2)", fontSize: 24, marginTop: 4 }}
          >
            K-WAY'S CAR LOUNGE · LV · 21+
          </div>
        </div>
      </div>
    </div>
  );
};

// ThumbC — "BOTTOM BAND" — full photo with mono info band on bottom 22%.
// Cinematic — feels like a still from a music video. Series-stamp top-left.
const ThumbC = ({
  dj = "FINAL DRIVE!",
  series = "DISCOVERY 001",
  date = "5.13.26",
  tag = "128 BPM · TECHNO",
  url = "@K-LAB",
  photo,
  photoPos = "50% 35%",
  bgSize = "cover",
  accent = "magenta",
  fx = {},
}) => {
  const a = ACCENTS[accent] || ACCENTS.magenta;
  return (
    <div
      style={{
        width: 1920,
        height: 1080,
        background: "#000",
        position: "relative",
        overflow: "hidden",
        fontFamily: "var(--font-body)",
        color: "#fff",
      }}
    >
      {/* Photo full */}
      {fx.noPhoto ? (
        <PatternBg accent={accent} />
      ) : photo ? (
        <DuotonePhoto
          src={photo}
          accent={accent}
          position={photoPos}
          bgSize={bgSize}
          intensity={0.35}
        />
      ) : (
        <PhotoPlaceholder />
      )}
      <div
        className="bg-scanlines"
        style={{ position: "absolute", inset: 0, opacity: 0.4 }}
      />
      <FxLayer fx={fx} accent={accent} />

      {/* Top-left stamp */}
      <div
        style={{
          position: "absolute",
          top: 40,
          left: 56,
          display: "flex",
          alignItems: "center",
          gap: 14,
        }}
      >
        <KLabStamp size={56} color={a.color} />
        <div>
          <div
            className="t-tech"
            style={{ fontSize: 42, color: "#fff", letterSpacing: "0.18em" }}
          >
            {series}
          </div>
          <div
            className="t-mono"
            style={{ color: a.color, fontSize: 26, marginTop: 2 }}
          >
            // K-LAB DISCOVERY
          </div>
        </div>
      </div>

      <div style={{ position: "absolute", top: 56, right: 56 }}>
        <div
          className="t-mono anim-flicker"
          style={{ color: "var(--neon-red, #ff2a2a)", fontSize: 24 }}
        >
          ● LIVE SET
        </div>
      </div>

      {/* Bottom black info band */}
      <div
        style={{
          position: "absolute",
          left: 0,
          right: 0,
          bottom: 0,
          height: 260,
          background:
            "linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.92) 30%, #000 100%)",
          display: "flex",
          alignItems: "flex-end",
        }}
      >
        <div style={{ padding: "0 56px 36px", width: "100%" }}>
          <div
            className="t-d1 fx-aberration"
            style={{
              fontSize: 150,
              lineHeight: 0.92,
              letterSpacing: "-0.02em",
            }}
          >
            {dj}
          </div>
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "flex-end",
              marginTop: 14,
              borderTop: `1px solid ${a.color}`,
              paddingTop: 12,
            }}
          >
            <div className="t-mono" style={{ color: a.color, fontSize: 28 }}>
              {tag} · REC {date}
            </div>
            {url && (
              <div
                className="t-mono"
                style={{ color: "var(--fg-2)", fontSize: 28 }}
              >
                {url} ↗
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

// ============================================================
// VERTICAL · Carousel (4:5 / 3:4) + Story / Reel (9:16)
// ============================================================
// One adaptive set. Each template is a flex-column layout parameterized by
// `w`×`h`, so the SAME three components render correctly at 1080×1350 (4:5
// carousel), 1080×1440 (3:4 carousel), and 1080×1920 (9:16 story/reel) — only
// the height changes. The studio passes `insets` (safe padding): tight & even
// for carousel, a large top/bottom margin for STORY so the hero lands inside
// the platform safe zone (dodging IG/TikTok UI overlays). Text-only works via
// fx.noPhoto → PatternBg, identical to the album/thumb templates.
//
// Type sizes are tuned for the fixed 1080 width; only the vertical rhythm flexes.

// VerticalA — "DISCOVERY STAMP" — full-bleed photo/pattern, headline anchored in
// the lower third (clears the story bottom-UI band). Portrait port of AlbumA.
const VerticalA = ({
  dj = "FINAL DRIVE!",
  series = "DISCOVERY 001",
  date = "5.13.26",
  tag = "128 BPM · TECHNO",
  url = "@K-LAB",
  photo,
  photoPos = "50% 40%",
  bgSize = "cover",
  accent = "magenta",
  fx = {},
  w = 1080,
  h = 1350,
  insets = { top: 48, right: 48, bottom: 48, left: 48 },
}) => {
  const a = ACCENTS[accent] || ACCENTS.magenta;
  return (
    <div
      style={{
        width: w,
        height: h,
        background: "#000",
        position: "relative",
        overflow: "hidden",
        fontFamily: "var(--font-body)",
        color: "#fff",
      }}
    >
      {fx.noPhoto ? (
        <PatternBg accent={accent} />
      ) : photo ? (
        <DuotonePhoto
          src={photo}
          accent={accent}
          position={photoPos}
          bgSize={bgSize}
          intensity={0.5}
        />
      ) : (
        <PhotoPlaceholder />
      )}
      <div
        className="bg-scanlines"
        style={{ position: "absolute", inset: 0, opacity: 0.35 }}
      />
      <FxLayer fx={fx} accent={accent} />
      {/* Bottom scrim so the lower-third type reads cleanly */}
      <div
        style={{
          position: "absolute",
          left: 0,
          right: 0,
          bottom: 0,
          height: "58%",
          background:
            "linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.82) 52%, #000 100%)",
        }}
      />

      <div
        style={{
          position: "absolute",
          top: insets.top,
          right: insets.right,
          bottom: insets.bottom,
          left: insets.left,
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
        }}
      >
        {/* Top rail */}
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "flex-start",
          }}
        >
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <KLabStamp size={44} color={a.color} />
            <div>
              <div className="t-mono" style={{ color: a.color, fontSize: 24 }}>
                // K-LAB DISCOVERY
              </div>
              <div
                className="t-jp"
                style={{
                  fontSize: 16,
                  color: "var(--fg-3)",
                  letterSpacing: "0.2em",
                  marginTop: 2,
                }}
              >
                サウンド・エクスペリメント
              </div>
            </div>
          </div>
          <div style={{ textAlign: "right" }}>
            <div
              className="t-tech"
              style={{ fontSize: 30, color: "#fff", letterSpacing: "0.16em" }}
            >
              {series}
            </div>
            <div
              className="t-mono"
              style={{ color: "var(--fg-2)", fontSize: 24, marginTop: 4 }}
            >
              {date}
            </div>
          </div>
        </div>

        {/* Lower-third headline block */}
        <div>
          <div
            className="t-mono"
            style={{
              color: a.color,
              fontSize: 24,
              marginBottom: 16,
              display: "flex",
              alignItems: "center",
              gap: 12,
            }}
          >
            <span
              style={{
                display: "inline-block",
                width: 40,
                height: 2,
                background: a.color,
              }}
            />
            // LIVE FROM K-WAY'S CAR LOUNGE
          </div>
          <div
            className="t-d1 fx-aberration"
            style={{ fontSize: 132, lineHeight: 0.9, letterSpacing: "-0.02em" }}
          >
            {dj}
          </div>
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "flex-end",
              marginTop: 20,
              borderTop: "1px solid var(--line-strong)",
              paddingTop: 14,
            }}
          >
            <div
              className="t-mono"
              style={{ color: "var(--fg-2)", fontSize: 28 }}
            >
              {tag}
            </div>
            {url && (
              <div
                className="t-mono"
                style={{ color: "var(--fg-2)", fontSize: 28 }}
              >
                {url} ↗
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

// VerticalB — "CENTER HERO" — vertically-centered wordmark stack inside the safe
// insets. The safe-zone-friendly default and the cleanest text-only (NO PHOTO)
// look. Portrait port of ThumbA / FlyerA.
const VerticalB = ({
  dj = "FINAL DRIVE!",
  series = "DISCOVERY 001",
  date = "5.13.26",
  tag = "128 BPM · TECHNO",
  url = "@K-LAB",
  photo,
  photoPos = "50% 40%",
  bgSize = "cover",
  accent = "magenta",
  fx = {},
  w = 1080,
  h = 1350,
  insets = { top: 48, right: 48, bottom: 48, left: 48 },
}) => {
  const a = ACCENTS[accent] || ACCENTS.magenta;
  return (
    <div
      style={{
        width: w,
        height: h,
        background: "#000",
        position: "relative",
        overflow: "hidden",
        fontFamily: "var(--font-body)",
        color: "#fff",
      }}
    >
      {fx.noPhoto ? (
        <PatternBg accent={accent} />
      ) : photo ? (
        <DuotonePhoto
          src={photo}
          accent={accent}
          position={photoPos}
          bgSize={bgSize}
          intensity={0.62}
        />
      ) : (
        <PhotoPlaceholder />
      )}
      <div
        className="bg-scanlines"
        style={{ position: "absolute", inset: 0, opacity: 0.3 }}
      />
      <FxLayer fx={fx} accent={accent} />
      <div
        style={{
          position: "absolute",
          inset: 0,
          background:
            "radial-gradient(ellipse at 50% 46%, transparent 0%, rgba(0,0,0,0.6) 82%)",
        }}
      />

      <div
        style={{
          position: "absolute",
          top: insets.top,
          right: insets.right,
          bottom: insets.bottom,
          left: insets.left,
          display: "flex",
          flexDirection: "column",
        }}
      >
        {/* Top rail */}
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
          }}
        >
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <KLabStamp size={40} color={a.color} />
            <div className="t-mono" style={{ color: a.color, fontSize: 24 }}>
              // K-LAB DISCOVERY
            </div>
          </div>
          <div
            className="t-mono anim-flicker"
            style={{ color: "var(--neon-red, #ff2a2a)", fontSize: 22 }}
          >
            ● LIVE SET
          </div>
        </div>

        {/* Centered hero — flex:1 keeps it in the vertical middle (= safe zone) */}
        <div
          style={{
            flex: 1,
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            textAlign: "center",
          }}
        >
          <div
            className="t-tech"
            style={{
              fontSize: 34,
              color: a.color,
              letterSpacing: "0.2em",
              marginBottom: 20,
            }}
          >
            {series}
          </div>
          <div
            className="t-d1 fx-aberration-strong"
            style={{
              fontSize: 150,
              lineHeight: 0.86,
              letterSpacing: "-0.025em",
            }}
          >
            {dj}
          </div>
          <div
            className="t-tech"
            style={{
              fontSize: 32,
              marginTop: 22,
              color: "#fff",
              letterSpacing: "0.16em",
            }}
          >
            {tag}
          </div>
          <div
            className="t-jp"
            style={{
              fontSize: 22,
              marginTop: 18,
              color: a.color,
              letterSpacing: "0.24em",
            }}
          >
            サウンド・エクスペリメント
          </div>
        </div>

        {/* Bottom footer */}
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "flex-end",
            borderTop: `1px solid ${a.color}`,
            paddingTop: 14,
          }}
        >
          <div
            className="t-mono"
            style={{ color: "var(--neon-green)", fontSize: 24 }}
          >
            ● REC · {date}
          </div>
          {url && (
            <div
              className="t-mono"
              style={{ color: "var(--fg-2)", fontSize: 24 }}
            >
              {url} ↗
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

// VerticalC — "BANNER SLASH" — photo/pattern in the top half, diagonal accent
// banner over the seam, headline + meta below. Portrait port of AlbumC. Photo
// height is a % of h so the seam tracks the canvas ratio.
const VerticalC = ({
  dj = "FINAL DRIVE!",
  series = "DISCOVERY 001",
  date = "5.13.26",
  tag = "128 BPM · TECHNO",
  url = "@K-LAB",
  photo,
  photoPos = "50% 35%",
  bgSize = "cover",
  accent = "magenta",
  fx = {},
  w = 1080,
  h = 1350,
  insets = { top: 48, right: 48, bottom: 48, left: 48 },
}) => {
  const a = ACCENTS[accent] || ACCENTS.magenta;
  const photoH = Math.round(h * 0.5);
  return (
    <div
      style={{
        width: w,
        height: h,
        background: "#000",
        position: "relative",
        overflow: "hidden",
        fontFamily: "var(--font-body)",
        color: "#fff",
      }}
    >
      {/* Photo zone — top half */}
      <div
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          right: 0,
          height: photoH,
          overflow: "hidden",
        }}
      >
        {fx.noPhoto ? (
          <PatternBg accent={accent} />
        ) : photo ? (
          <RawPhoto
            src={photo}
            position={photoPos}
            bgSize={bgSize}
            desaturate={0.3}
          />
        ) : (
          <PhotoPlaceholder />
        )}
        <FxLayer fx={fx} accent={accent} />
        <div
          style={{
            position: "absolute",
            inset: 0,
            background: "linear-gradient(180deg, transparent 55%, #000 100%)",
          }}
        />
        <div
          className="bg-scanlines"
          style={{ position: "absolute", inset: 0, opacity: 0.5 }}
        />
      </div>

      {/* Top mono rail — accent stripe so the label stays legible over the photo */}
      <div
        style={{
          position: "absolute",
          top: insets.top,
          left: insets.left,
          right: insets.right,
        }}
      >
        <div
          className="t-mono"
          style={{
            display: "inline-block",
            color: "#000",
            background: a.color,
            fontSize: 22,
            padding: "7px 14px",
            boxShadow: a.glow,
          }}
        >
          // K-LAB DISCOVERY · LIVE SET
        </div>
      </div>

      {/* Diagonal banner over the seam */}
      <div
        style={{
          position: "absolute",
          top: photoH - 62,
          left: -50,
          right: -50,
          height: 118,
          background: a.color,
          transform: "rotate(-2.5deg)",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          boxShadow: a.glow,
          zIndex: 2,
          overflow: "hidden",
        }}
      >
        <div
          className="t-speed"
          style={{
            fontSize: 92,
            color: "#000",
            lineHeight: 1,
            whiteSpace: "nowrap",
            letterSpacing: "0.02em",
          }}
        >
          K-LAB {series}
        </div>
      </div>

      {/* Headline + meta */}
      <div
        style={{
          position: "absolute",
          top: photoH + 70,
          left: insets.left,
          right: insets.right,
        }}
      >
        <div
          className="t-d1 fx-aberration"
          style={{ fontSize: 132, lineHeight: 0.92, letterSpacing: "-0.02em" }}
        >
          {dj}
        </div>
        <div
          className="t-tech"
          style={{
            fontSize: 34,
            marginTop: 16,
            color: a.color,
            letterSpacing: "0.16em",
          }}
        >
          {tag}
        </div>
      </div>

      {/* Footer */}
      <div
        style={{
          position: "absolute",
          bottom: insets.bottom,
          left: insets.left,
          right: insets.right,
          display: "flex",
          justifyContent: "space-between",
          alignItems: "flex-end",
          borderTop: "1px solid var(--line-strong)",
          paddingTop: 14,
        }}
      >
        <div
          className="t-mono"
          style={{ color: "var(--neon-green)", fontSize: 22 }}
        >
          ● REC · {date} · K-WAY'S CAR LOUNGE
        </div>
        {url ? (
          <div className="t-mono" style={{ color: a.color, fontSize: 22 }}>
            {url} ↗
          </div>
        ) : (
          <KLabStamp size={44} color={a.color} />
        )}
      </div>
    </div>
  );
};

// ============================================================
// Lookup tables — the studio uses these to switch templates.
// ============================================================

const ALBUM_TEMPLATES = {
  A: {
    Comp: AlbumA,
    label: "A · DISCOVERY STAMP",
    sub: "Photo full bleed, name across bottom",
  },
  B: {
    Comp: AlbumB,
    label: "B · OUTLINE PORTRAIT",
    sub: "Halftone duotone, centered outline mark",
  },
  C: {
    Comp: AlbumC,
    label: "C · BANNER SLASH",
    sub: "Photo top, diagonal banner, name below",
  },
};

const THUMB_TEMPLATES = {
  A: {
    Comp: ThumbA,
    label: "A · ABERRATION HERO",
    sub: "Centered glitch name, full-bleed photo",
  },
  B: { Comp: ThumbB, label: "B · SPLIT", sub: "Type stack left, photo right" },
  C: {
    Comp: ThumbC,
    label: "C · BOTTOM BAND",
    sub: "Cinematic photo, info band bottom",
  },
};

// Shared by both vertical modes — CAROUSEL (4:5 / 3:4) and STORY (9:16). The
// studio hands each template the right w×h + safe-area insets per mode.
const VERTICAL_TEMPLATES = {
  A: {
    Comp: VerticalA,
    label: "A · DISCOVERY STAMP",
    sub: "Full-bleed, headline lower third",
  },
  B: {
    Comp: VerticalB,
    label: "B · CENTER HERO",
    sub: "Centered stack, best text-only",
  },
  C: {
    Comp: VerticalC,
    label: "C · BANNER SLASH",
    sub: "Photo top, diagonal banner, name below",
  },
};

Object.assign(window, {
  AlbumA,
  AlbumB,
  AlbumC,
  ThumbA,
  ThumbB,
  ThumbC,
  VerticalA,
  VerticalB,
  VerticalC,
  ALBUM_TEMPLATES,
  THUMB_TEMPLATES,
  VERTICAL_TEMPLATES,
  ACCENTS,
  DuotonePhoto,
  RawPhoto,
  PhotoPlaceholder,
  PatternBg,
  FxLayer,
});