/* Library / Media — short English video reels (real titles, placeholder thumbs).
   Order is randomised on each load (V6 md.11). Like + share icons per card (md.15).
   Real playback (embeds) to be wired once hosting links arrive. */

const MEDIA_VIDEOS = [
  "Code to Unlock Real Success",
  "The Secret To True Happiness",
  "When Love Overflows",
  "The Book that Holds Every Answer",
  "Paradise Lies Beneath Her Feet",
  "Love People & Protect Nature",
  "Faith Built for Community",
  "Want to Be Your Own Boss",
  "What if Death Isn't the End?",
  "Feel Like There's No Purpose?",
  "Mary, Our Beloved Mother",
  "Jesus, Peace Be Upon Him",
  "The True Reason You Exist",
  "This Verse Says It All",
  "Look Beyond Appearances",
];

function mediaShuffled(arr) {
  const a = arr.slice();
  for (let i = a.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    const t = a[i]; a[i] = a[j]; a[j] = t;
  }
  return a;
}

function MediaActions({ accent }) {
  return (
    <div style={{ display: "flex", gap: 16, marginTop: 10, alignItems: "center" }}>
      <button title="Like" style={{ background: "transparent", border: 0, padding: 0, cursor: "pointer", color: "var(--gray-warm)", fontSize: 16, lineHeight: 1 }}
        onMouseEnter={(e) => e.currentTarget.style.color = accent}
        onMouseLeave={(e) => e.currentTarget.style.color = "var(--gray-warm)"}>♡</button>
      <button title="Share" style={{ background: "transparent", border: 0, padding: 0, cursor: "pointer", color: "var(--gray-warm)", fontSize: 15, lineHeight: 1 }}
        onMouseEnter={(e) => e.currentTarget.style.color = accent}
        onMouseLeave={(e) => e.currentTarget.style.color = "var(--gray-warm)"}>↗</button>
    </div>
  );
}

function MediaHiFi({ mode = "desktop", accent = "#B89968" }) {
  const mobile = mode === "mobile";
  const [lang] = (typeof useLang === "function" ? useLang() : ["en"]);
  const lt = (k) => (typeof libT === "function" ? libT(k, lang) : k);
  const videos = React.useMemo(() => mediaShuffled(MEDIA_VIDEOS), []);

  return (
    <div className="cw-frame" style={{ overflowY: "auto" }}>
      <TopNav current="Library" mobile={mobile} accent={accent} />

      {/* Hero */}
      <section style={{ padding: mobile ? "56px 22px 32px" : "120px 96px 64px", borderBottom: "1px solid var(--hairline)" }}>
        <span className="hf-eyebrow-rule">03  /  {lt("library")}  /  {lt("media")}</span>
        <h1 className="serif" style={{
          fontWeight: 300, fontSize: mobile ? 64 : 156, lineHeight: 0.94, letterSpacing: "-0.03em",
          margin: "20px 0 16px", fontVariationSettings: '"opsz" 144, "SOFT" 30',
        }}>{lt("media")}</h1>
        <p className="serif italic" style={{ fontSize: mobile ? 18 : 26, color: "var(--ink-soft)", margin: 0, maxWidth: 720, fontVariationSettings: '"opsz" 9, "SOFT" 100' }}>
          {lt("media_hero_sub")}
        </p>
      </section>

      {/* Reels grid */}
      <section style={{ padding: mobile ? "32px 22px 72px" : "56px 96px 120px" }}>
        <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr 1fr" : "repeat(4, 1fr)", gap: mobile ? 18 : 32 }}>
          {videos.map((title, i) => (
            <article key={title} style={{ display: "flex", flexDirection: "column", cursor: "pointer" }}>
              <div style={{
                aspectRatio: "9 / 16", position: "relative", overflow: "hidden",
                borderRadius: 4, border: "1px solid var(--hairline)",
                background: `linear-gradient(155deg, var(--bg-warm) 0%, var(--bg-deep) 55%, ${accent}26 100%)`,
              }}>
                <span style={{ position: "absolute", top: 12, left: 14, fontFamily: "var(--serif)", fontStyle: "italic", color: accent, fontSize: 13, fontVariationSettings: '"opsz" 9, "SOFT" 100' }}>№ {String(i + 1).padStart(2, "0")}</span>
                {/* play button */}
                <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center" }}>
                  <span style={{
                    width: mobile ? 44 : 54, height: mobile ? 44 : 54, borderRadius: "50%",
                    border: `1px solid ${accent}`, background: "rgba(0,0,0,0.18)", color: "#fff",
                    display: "grid", placeItems: "center", fontSize: 16, backdropFilter: "blur(2px)",
                  }}>▶</span>
                </div>
                <span style={{ position: "absolute", left: 14, right: 14, bottom: 14, fontFamily: "var(--sans)", fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-soft)" }}>Esad Cosan</span>
              </div>
              <h4 className="serif" style={{ fontWeight: 400, fontSize: mobile ? 15 : 18, letterSpacing: "-0.005em", margin: "12px 0 0", lineHeight: 1.28 }}>{title}</h4>
              <MediaActions accent={accent} />
            </article>
          ))}
        </div>
      </section>

      <SiteFooter mobile={mobile} accent={accent} />
    </div>
  );
}

/* Compact horizontal strip for the landing page (V6 md.13). */
function MediaStrip({ mode = "desktop", accent = "#B89968" }) {
  const mobile = mode === "mobile";
  const [lang] = (typeof useLang === "function" ? useLang() : ["en"]);
  const lt = (k) => (typeof libT === "function" ? libT(k, lang) : k);
  const preview = MEDIA_VIDEOS.slice(0, mobile ? 5 : 7);
  const go = () => { window.location.hash = "#/library/media"; };
  return (
    <section style={{ padding: mobile ? "48px 0 0" : "100px 0 0", borderTop: "1px solid var(--hairline)" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", padding: mobile ? "0 22px" : "0 96px", marginBottom: mobile ? 20 : 32 }}>
        <span className="hf-eyebrow-rule">{lt("media")}</span>
        <span onClick={go} style={{ cursor: "pointer", fontSize: 13, letterSpacing: "0.04em", color: accent }}>{lt("all_media")} →</span>
      </div>
      <div style={{ display: "flex", gap: mobile ? 12 : 18, overflowX: "auto", padding: mobile ? "0 22px 8px" : "0 96px 8px", scrollSnapType: "x proximity", WebkitOverflowScrolling: "touch" }}>
        {preview.map((title, i) => (
          <article key={title} onClick={go} style={{ flex: "0 0 auto", width: mobile ? 134 : 184, cursor: "pointer", scrollSnapAlign: "start" }}>
            <div style={{
              aspectRatio: "9 / 16", position: "relative", overflow: "hidden", borderRadius: 4,
              border: "1px solid var(--hairline)",
              background: `linear-gradient(155deg, var(--bg-warm) 0%, var(--bg-deep) 55%, ${accent}26 100%)`,
            }}>
              <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center" }}>
                <span style={{ width: 40, height: 40, borderRadius: "50%", border: `1px solid ${accent}`, background: "rgba(0,0,0,0.18)", color: "#fff", display: "grid", placeItems: "center", fontSize: 13 }}>▶</span>
              </div>
            </div>
            <h4 className="serif" style={{ fontWeight: 400, fontSize: mobile ? 13 : 15, margin: "10px 0 0", lineHeight: 1.3 }}>{title}</h4>
          </article>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { MediaHiFi, MediaStrip, MEDIA_VIDEOS });