/* global React, Icon, Eyebrow, GoldRule, Pill, Button, Container, SectionHead, Reveal, Wordmark, ParallaxLayer */

// ====================== SHARED DATA ======================================
const COURSES = [
  { n: "01", title: "Understanding the Kingdom", img: "assets/course-01.jpg", file: "understanding-the-kingdom.html",
    blurb: "The foundation everything else builds on. See the Kingdom of God as a governing reality you were called to represent." },
  { n: "02", title: "Kingdom Economics & Biblical Finance", img: "assets/course-02.jpg", file: "kingdom-economics.html",
    blurb: "Learn to steward resources by Kingdom principles — from personal finance to marketplace influence." },
  { n: "03", title: "Prayer and Spiritual Warfare", img: "assets/course-03.jpg", file: "prayer-and-spiritual-warfare.html",
    blurb: "Engage in effective, authoritative prayer and stand firm in the midst of spiritual conflict." },
  { n: "04", title: "Prophets & Prophecy", img: "assets/course-04.jpg", file: "prophets-and-prophecy.html",
    blurb: "Understand the prophetic, its purpose, its order, and its right use in the Church today." },
  { n: "05", title: "Purpose of the Church", img: "assets/course-05.jpg", file: "purpose-of-the-church.html",
    blurb: "The Church was not designed to simply survive, it was designed to govern. Recover the mission and original design of the Church as God intended it to function." },
  { n: "06", title: "Order in the House", img: "assets/course-06.jpg", file: "order-in-the-house.html",
    blurb: "Healthy organizations don't happen by accident. Learn to govern ministry and community with the structure, accountability, and honor that sustains them through every season." },
  { n: "07", title: "Praise and Worship", img: "assets/course-07.jpg", file: "praise-and-worship.html",
    blurb: "Worship is not a warm-up. It is a weapon and a lifestyle. Cultivate a ministry of worship that is deeply rooted in Scripture and expressed with excellence." },
  { n: "08", title: "Ministry of Helps and Hospitality", img: "assets/course-08.jpg", file: "ministry-of-helps.html",
    blurb: "Every great mission runs on people who serve with excellence behind the scenes. Learn the gifts that strengthen and sustain the body — and why they matter more than most leaders realize." },
];
window.COURSES = COURSES;

// ====================== HERO (CENTERED, VIDEO-LED — homepage) ============
function HeroSplit({ eyebrow, title, sub, body, onWalkthrough }) {
  return (
    <section style={{
      position: "relative", overflow: "hidden", paddingTop: 78, minHeight: "94vh",
      display: "flex", alignItems: "flex-end",
      background: "linear-gradient(150deg, #0A5BA8 0%, #004486 48%, #06294F 100%)"
    }}>
      {/* background video leads the hero */}
      <ParallaxLayer aria-hidden="true" speed={46}
        style={{ position: "absolute", left: 0, right: 0, top: "-10%", height: "120%", overflow: "hidden", pointerEvents: "none", zIndex: 0 }}>
        <video
          src={((window.__resources && window.__resources.heroVideo) || "assets/hero.mp4")}
          autoPlay muted loop playsInline
          style={{ position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-50%)",
            minWidth: "100%", minHeight: "100%", width: "auto", height: "auto", objectFit: "cover" }}
        ></video>
      </ParallaxLayer>
      {/* subtle top scrim — only enough to keep the nav legible; her face stays clear */}
      <div aria-hidden="true" style={{ position: "absolute", inset: 0, zIndex: 1, pointerEvents: "none",
        background: "linear-gradient(180deg, rgba(4,24,45,0.4) 0%, rgba(4,24,45,0) 16%)" }} />
      {/* blue tint anchored to the lower third — fades up so the image reads above it */}
      <div aria-hidden="true" style={{ position: "absolute", inset: 0, zIndex: 1, pointerEvents: "none",
        background: "linear-gradient(180deg, rgba(6,41,79,0) 30%, rgba(6,41,79,0.5) 52%, rgba(5,33,63,0.88) 80%, #04182d 100%)" }} />
      <div style={{ position: "absolute", top: 78, left: 0, right: 0, height: 1, zIndex: 2,
        background: "linear-gradient(90deg, transparent, rgba(201,162,75,0.5), transparent)" }} />
      <Container style={{ position: "relative", zIndex: 2 }}>
        <div style={{ maxWidth: 920, margin: "0 auto", textAlign: "center", padding: "120px 0 86px" }}>
          <Reveal>
            <Eyebrow tone="light" style={{ color: "var(--gold-500)", textAlign: "center" }}>{eyebrow}</Eyebrow>
          </Reveal>
          <Reveal delay={70}>
            <h1 style={{ fontFamily: "var(--font-display)", color: "#fff", textTransform: "uppercase",
              fontSize: "clamp(2.3rem, 4.4vw, 3.8rem)", lineHeight: 1.04, letterSpacing: ".012em",
              margin: "20px auto 0", textWrap: "balance", maxWidth: 880 }}>{title}</h1>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: "var(--font-sans)", color: "rgba(255,255,255,0.9)", fontSize: 16,
              lineHeight: 1.55, margin: "22px auto 0", maxWidth: 1040, fontWeight: 500, textWrap: "pretty" }}>{sub}</p>
          </Reveal>
          {body && (
            <Reveal delay={200}>
              <p style={{ fontFamily: "var(--font-sans)", color: "rgba(255,255,255,0.66)", fontSize: 16,
                lineHeight: 1.62, margin: "16px auto 0", maxWidth: 600, textWrap: "pretty" }}>{body}</p>
            </Reveal>
          )}
          <Reveal delay={260}>
            <div style={{ display: "flex", gap: 14, flexWrap: "wrap", marginTop: 36, justifyContent: "center" }}>
              <Button variant="enroll" size="lg" onClick={onWalkthrough}>Enroll Now</Button>
              <Button variant="secondary-light" size="lg" href="product.html#courses">Explore the Courses</Button>
            </div>
          </Reveal>
        </div>
      </Container>
    </section>
  );
}
window.HeroSplit = HeroSplit;

// ====================== HERO (BANNER — inner pages) ======================
function HeroBanner({ eyebrow, title, sub, body, primary, secondary, align = "center", minH = 560, video }) {
  const centered = align === "center";
  const videoSrc = video && (((window.__resources && window.__resources[video.id]) || video.src));
  return (
    <section style={{
      position: "relative", overflow: "hidden", paddingTop: 78, minHeight: minH,
      display: "flex", alignItems: "center",
      background: "radial-gradient(110% 130% at 80% -10%, #0A5BA8 0%, rgba(10,91,168,0) 50%), linear-gradient(160deg, #06294F 0%, #0B1B2B 78%)"
    }}>
      {video && (
        <ParallaxLayer aria-hidden="true" speed={46}
          style={{ position: "absolute", left: 0, right: 0, top: "-10%", height: "120%", overflow: "hidden", pointerEvents: "none", zIndex: 0 }}>
          <video src={videoSrc} autoPlay muted loop playsInline
            style={{ position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-50%)",
              minWidth: "100%", minHeight: "100%", width: "auto", height: "auto", objectFit: "cover" }}></video>
        </ParallaxLayer>
      )}
      {video && <div aria-hidden="true" style={{ position: "absolute", inset: 0, zIndex: 1, pointerEvents: "none",
        background: "radial-gradient(120% 120% at 78% -8%, rgba(10,91,168,0.42) 0%, rgba(10,91,168,0) 56%), linear-gradient(160deg, rgba(6,41,79,0.5) 0%, rgba(11,27,43,0.62) 80%)" }} />}
      {video && <div aria-hidden="true" style={{ position: "absolute", left: 0, right: 0, bottom: 0, height: "40%", zIndex: 1, pointerEvents: "none",
        background: "linear-gradient(180deg, rgba(11,27,43,0) 0%, rgba(11,27,43,0.5) 60%, #0B1B2B 100%)" }} />}
      {!video && <ParallaxLayer aria-hidden="true" speed={28} baseTransform={centered ? "translate(50%,-50%)" : "translateY(-50%)"}
        style={{ position: "absolute", right: centered ? "50%" : "-5%", top: "50%", zIndex: 2, pointerEvents: "none" }}>
        <img src={((window.__resources&&window.__resources.crestSeal)||"assets/crest-white.svg")} alt="" style={{
          height: "150%", opacity: 0.05, display: "block" }} />
      </ParallaxLayer>}
      <div style={{ position: "absolute", top: 78, left: 0, right: 0, height: 1, zIndex: 2,
        background: "linear-gradient(90deg, transparent, rgba(201,162,75,0.45), transparent)" }} />
      <Container style={{ position: "relative", zIndex: 2, paddingTop: 64, paddingBottom: 72 }}>
        <div style={{ maxWidth: centered ? 880 : 760, margin: centered ? "0 auto" : 0, textAlign: centered ? "center" : "left" }}>
          <Reveal>
            <Eyebrow tone="light" style={{ color: "var(--gold-500)" }}>{eyebrow}</Eyebrow>
          </Reveal>
          <Reveal delay={70}>
            <h1 className="ksm-hero-gold" style={{ fontFamily: "var(--font-display)", textTransform: "uppercase",
              fontSize: "clamp(2.4rem, 4.4vw, 4rem)", lineHeight: 1.03, letterSpacing: ".012em",
              margin: "18px 0 0", textWrap: "balance", display: "inline-block" }}>{title}</h1>
          </Reveal>
          {!centered && <Reveal delay={120}><GoldRule w={56} style={{ margin: "24px 0 0" }} /></Reveal>}
          <Reveal delay={150}>
            <p style={{ fontFamily: "var(--font-sans)", color: "rgba(255,255,255,0.86)", fontSize: 19,
              lineHeight: 1.6, margin: centered ? "22px auto 0" : "22px 0 0", maxWidth: 620,
              fontWeight: 500, textWrap: "pretty" }}>{sub}</p>
          </Reveal>
          {body && <Reveal delay={210}>
            <p style={{ fontFamily: "var(--font-sans)", color: "rgba(255,255,255,0.6)", fontSize: 15.5,
              lineHeight: 1.62, margin: centered ? "16px auto 0" : "16px 0 0", maxWidth: 620, textWrap: "pretty" }}>{body}</p>
          </Reveal>}
          {(primary || secondary) && <Reveal delay={270}>
            <div style={{ display: "flex", gap: 14, flexWrap: "wrap", marginTop: 32,
              justifyContent: centered ? "center" : "flex-start" }}>
              {primary}{secondary}
            </div>
          </Reveal>}
        </div>
      </Container>
    </section>
  );
}
window.HeroBanner = HeroBanner;

// ====================== CLICK-TO-PLAY YOUTUBE EMBED ======================
// Click once to start — no autoplay, no mute, no loop. Once pressed, it plays through normally.
function YouTubeEmbed({ id, title }) {
  const [playing, setPlaying] = React.useState(false);
  return (
    <div style={{ position: "relative", width: "100%", aspectRatio: "16/9", borderRadius: 16,
      overflow: "hidden", boxShadow: "var(--shadow-md)", background: "#06121f" }}>
      {playing ? (
        <iframe
          src={"https://www.youtube-nocookie.com/embed/" + id + "?autoplay=1&rel=0&playsinline=1"}
          title={title}
          width="100%" height="100%"
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%", border: "none", display: "block" }}
          frameBorder="0"
          referrerPolicy="strict-origin-when-cross-origin"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          allowFullScreen
        ></iframe>
      ) : (
        <button onClick={() => setPlaying(true)} aria-label={"Play video: " + title} style={{
          position: "absolute", inset: 0, width: "100%", height: "100%", border: "none", padding: 0,
          cursor: "pointer", background: "none" }}>
          <img src={"https://img.youtube.com/vi/" + id + "/maxresdefault.jpg"} alt=""
            onError={e => { e.currentTarget.src = "https://img.youtube.com/vi/" + id + "/hqdefault.jpg"; }}
            style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
          <span aria-hidden="true" style={{ position: "absolute", inset: 0,
            background: "linear-gradient(180deg, rgba(6,41,79,0.05) 35%, rgba(4,24,45,0.55) 100%)" }} />
          <span aria-hidden="true" style={{ position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-50%)",
            width: 84, height: 84, borderRadius: "50%", background: "rgba(255,255,255,0.96)",
            display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "var(--shadow-lg)",
            transition: "transform .2s var(--ease), background .2s var(--ease)" }}
            onMouseEnter={e => { e.currentTarget.style.transform = "translate(-50%,-50%) scale(1.08)"; e.currentTarget.style.background = "#fff"; }}
            onMouseLeave={e => { e.currentTarget.style.transform = "translate(-50%,-50%) scale(1)"; e.currentTarget.style.background = "rgba(255,255,255,0.96)"; }}>
            <svg width="28" height="28" viewBox="0 0 24 24" fill="var(--navy-700)" style={{ marginLeft: 3 }}>
              <path d="M8 5v14l11-7z" />
            </svg>
          </span>
        </button>
      )}
    </div>
  );
}
window.YouTubeEmbed = YouTubeEmbed;

// ====================== COURSE CARD (photo-led) ==========================
function CourseCard({ c, delay = 0 }) {
  const [hover, setHover] = React.useState(false);
  return (
    <Reveal delay={delay} style={{ height: "100%" }}>
      <a href={c.file} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
        style={{ display: "flex", flexDirection: "column", textDecoration: "none",
          background: "#fff", border: "1px solid var(--line)", borderRadius: 10, overflow: "hidden",
          height: "100%", boxSizing: "border-box",
          boxShadow: hover ? "var(--shadow-md)" : "var(--shadow-sm)",
          transform: hover ? "translateY(-4px)" : "none", transition: "all .25s var(--ease)" }}>
        {/* Photo */}
        <div style={{ position: "relative", aspectRatio: "16/9", overflow: "hidden", flexShrink: 0,
          background: "linear-gradient(160deg, #0A5BA8 0%, #004486 55%, #06294F 100%)" }}>
          {c.img ? (
            <React.Fragment>
              <img src={c.img} alt={typeof c.title === "string" ? c.title : ""} style={{
                position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover",
                transform: hover ? "scale(1.06)" : "none", transition: "transform .5s var(--ease)" }} />
              <div aria-hidden="true" style={{ position: "absolute", inset: 0, pointerEvents: "none",
                background: "linear-gradient(0deg, rgba(4,60,115,.55) 0%, rgba(4,60,115,.15) 40%, rgba(4,60,115,0) 65%)" }} />
            </React.Fragment>
          ) : (
            <React.Fragment>
              <image-slot id={"course-" + c.n} shape="rect"
                style={{ position: "absolute", inset: 0, width: "100%", height: "100%",
                  transform: hover ? "scale(1.06)" : "none", transition: "transform .5s var(--ease)" }}
                placeholder={"Photo — " + c.title}></image-slot>
              <div aria-hidden="true" style={{ position: "absolute", inset: 0, pointerEvents: "none",
                background: "linear-gradient(180deg, rgba(6,18,32,0) 34%, rgba(6,18,32,0.45) 64%, rgba(6,18,32,0.9) 100%)" }} />
              <h3 className="ksm-hero-gold" style={{ position: "absolute", left: 22, right: 22, bottom: 18, margin: 0,
                fontFamily: "var(--font-display)", textTransform: "uppercase", fontWeight: 800,
                fontSize: "clamp(1.25rem, 1.5vw, 1.55rem)", lineHeight: 1.08, letterSpacing: ".008em",
                display: "inline-block", textWrap: "balance" }}>{c.title}</h3>
            </React.Fragment>
          )}
        </div>
        {/* Body */}
        <div style={{ padding: "22px 24px 24px", display: "flex", flexDirection: "column", flex: 1 }}>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: 14.5, lineHeight: 1.6, color: "var(--slate)",
            margin: 0, textWrap: "pretty" }}>{c.blurb}</p>
        </div>
      </a>
    </Reveal>
  );
}
window.CourseCard = CourseCard;

// ====================== AUTHORITY BAR ====================================
function AuthorityBar({ items }) {
  return (
    <section style={{ background: "var(--ink)", padding: "30px 0" }}>
      <Container>
        <div className="ksm-authbar" style={{ display: "flex", alignItems: "center", justifyContent: "center",
          flexWrap: "wrap", gap: "14px 28px" }}>
          {items.map((it, i) => (
            <React.Fragment key={it}>
              <span style={{ fontFamily: "var(--font-label)", fontSize: 12.5, fontWeight: 600,
                letterSpacing: ".08em", textTransform: "uppercase", color: "rgba(255,255,255,0.85)" }}>{it}</span>
              {i < items.length - 1 && <span style={{ width: 5, height: 5, borderRadius: "50%",
                background: "var(--gold-500)" }} />}
            </React.Fragment>
          ))}
        </div>
      </Container>
    </section>
  );
}
window.AuthorityBar = AuthorityBar;