// Editorial image tile — uses real Unsplash photos with editorial label overlay.

// Real uploaded images — interiors + portraits
const UNSPLASH = {
  // room interiors
  0: "uploads/u1862462214_Korean_VIP_karaoke_room_black_interior_marble_tab_c50ce02c-503d-4449-b7dd-5ae22103104a_0.png",
  1: "uploads/u1862462214_premium_VIP_noraebang_room_black_interior_marble__b04c313a-c21e-41d5-9691-531f59d82999_0.png",
  2: "uploads/u1862462214_premium_VIP_noraebang_room_black_interior_marble__b04c313a-c21e-41d5-9691-531f59d82999_3.png",
  3: "uploads/u1862462214_premium_VIP_noraebang_room_black_interior_marble__b750d1ea-4f29-45cc-ac53-f05504196fac_1.png",
  4: "uploads/u1862462214_A_soft_ambient_interior_scene_featuring_a_Korean__79ada31e-dfa1-45b5-bb85-ea5d8cf9160e_1.png",
  // portraits
  5: "uploads/u1862462214_A_hyper-realistic_editorial-style_portrait_of_a_s_6792b6bf-53c9-401d-b0e3-27d73182629f_2.png",
  6: "uploads/u1862462214_Beautiful_Korean_woman_clean_minimal_background_w_1bc81eb2-d40a-47dc-8779-e3050cfbd0fd_0.png",
  7: "uploads/u1862462214_beautiful_korean_woman_soft_facial_features_pale__80dc31f4-9ee0-46c4-9566-ee730f9b46e3_0.png",
  8: "uploads/u1862462214_Beautiful_Korean_woman_clean_minimal_background_w_c0f8d224-1c8d-48f7-a46e-e42d9903e103_1.png",
  hero: "uploads/u1862462214_premium_VIP_noraebang_room_black_interior_marble__b04c313a-c21e-41d5-9691-531f59d82999_0.png",
};
window.UNSPLASH = UNSPLASH;

function EditorialPH({ label = "IMG", tone = "dark", aspect = "4/5", variant = 0, children, style }) {
  const isDark = tone === "dark";
  const src = UNSPLASH[variant % 9];

  return (
    <div
      className="hov-zoom"
      style={{
        position: "relative",
        aspectRatio: aspect,
        overflow: "hidden",
        background: isDark ? "#0A0A0A" : "#E8E5DC",
        color: isDark ? "#F4F2ED" : "#0A0A0A",
        ...style,
      }}
    >
      <img
        src={src}
        alt={label}
        className="ph-inner"
        loading="lazy"
        style={{
          width: "100%",
          height: "100%",
          objectFit: "cover",
          display: "block",
          filter: isDark ? "grayscale(0.25) contrast(1.05) brightness(0.88)" : "grayscale(0.35) contrast(1.02) brightness(0.98)",
        }}
      />
      {/* subtle vignette for editorial feel */}
      <div style={{
        position: "absolute",
        inset: 0,
        background: isDark
          ? "radial-gradient(120% 80% at 50% 50%, transparent 40%, rgba(0,0,0,0.4) 100%)"
          : "radial-gradient(120% 80% at 50% 50%, transparent 50%, rgba(0,0,0,0.15) 100%)",
        pointerEvents: "none",
      }} />

      {/* label chip */}
      <div style={{
        position: "absolute", left: 12, top: 12,
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 9, letterSpacing: "0.16em", textTransform: "uppercase",
        color: isDark ? "rgba(255,255,255,0.8)" : "rgba(0,0,0,0.75)",
        mixBlendMode: isDark ? "normal" : "normal",
        textShadow: isDark ? "0 1px 2px rgba(0,0,0,0.4)" : "none",
      }}>
        {label}
      </div>
      <div style={{
        position: "absolute", right: 12, top: 12,
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 9, letterSpacing: "0.16em",
        color: isDark ? "rgba(255,255,255,0.8)" : "rgba(0,0,0,0.75)",
        textShadow: isDark ? "0 1px 2px rgba(0,0,0,0.4)" : "none",
      }}>
        N° {String(variant + 1).padStart(3, "0")}
      </div>
      {children}
    </div>
  );
}

window.EditorialPH = EditorialPH;