/* global React, Icon, Eyebrow, GoldRule, Pill, Button, Container, SectionHead, Reveal,
   HeroSplit, CourseCard, AuthorityBar, COURSES, YouTubeEmbed, mountPage */

// ---------- INTRO VIDEO ----------
function HomeVideo() {
  return (
    <section style={{ background: "#fff", padding: "88px 0 0" }}>
      <Container>
        <Reveal>
          <h2 style={{ fontFamily: "var(--font-display)", textTransform: "uppercase", textAlign: "center",
            fontSize: "clamp(1.9rem,3.2vw,2.9rem)", letterSpacing: ".015em", color: "var(--ink)",
            margin: "0 0 32px", lineHeight: 1.07 }}>Welcome to KSM</h2>
        </Reveal>
        <Reveal delay={70}>
          <div style={{ maxWidth: 860, margin: "0 auto" }}>
            <YouTubeEmbed id="XP8H2_XLCZY" title="Kingdom School of Ministry — Introduction" />
          </div>
        </Reveal>
      </Container>
    </section>
  );
}

// ---------- FOUNDER SECTION ----------
function HomeAuthority() {
  const creds = [
    "Internationally Acclaimed Life Strategist",
    "Bestselling Author",
    "Former Senator of Bermuda",
  ];
  return (
    <section style={{ background: "#fff", padding: "104px 0" }}>
      <Container>
        <div className="ksm-twocol" style={{ display: "grid", gridTemplateColumns: "0.92fr 1.08fr",
          gap: 64, alignItems: "center" }}>
          <Reveal>
            <div style={{ position: "relative" }}>
              <img src="assets/founder-portrait.jpg" alt="Dr. Cindy Trimm"
                style={{ display: "block", width: "100%", height: 520, objectFit: "cover",
                  objectPosition: "center 60%", borderRadius: 12, boxShadow: "var(--shadow-lg)" }} />
              <div aria-hidden="true" style={{ position: "absolute", inset: 0, borderRadius: 12, pointerEvents: "none",
                border: "1px solid rgba(201,162,75,0.45)", transform: "translate(14px,14px)" }} />
            </div>
          </Reveal>
          <Reveal delay={120}>
            <Eyebrow>Our Founder</Eyebrow>
            <h2 style={{ fontFamily: "var(--font-display)", textTransform: "uppercase",
              fontSize: "clamp(1.9rem,3.2vw,2.8rem)", letterSpacing: ".015em", color: "var(--ink)",
              margin: "14px 0 0", lineHeight: 1.08 }}>Learn from someone who has led on the world stage</h2>
            <GoldRule w={48} style={{ margin: "22px 0 0" }} />
            <p style={{ fontFamily: "var(--font-sans)", fontSize: 16, lineHeight: 1.62, color: "var(--slate)",
              margin: "22px 0 0", maxWidth: 540, textWrap: "pretty" }}>
              For more than 30 years, Dr. Cindy Trimm has equipped leaders on every continent — in government chambers, boardrooms, sanctuaries, and stadiums. She founded Kingdom School of Ministry in 1995 because she saw what happens when gifted people are never fully formed: they plateau. They burn out. They lead from competency instead of conviction.</p>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: 16, lineHeight: 1.62, color: "var(--slate)",
              margin: "16px 0 0", maxWidth: 540, textWrap: "pretty" }}>
              When you learn from Dr. Trimm, you're getting the frameworks, principles, and tools she has spent three decades refining — now structured into eight courses built to take you further than you've ever led before.</p>
            {/* Credentials — clean editorial list, no icons */}
            <div style={{ marginTop: 34, borderTop: "1px solid var(--line)" }}>
              {creds.map(t => (
                <div key={t} style={{ display: "flex", alignItems: "center", gap: 18, padding: "16px 0",
                  borderBottom: "1px solid var(--line-soft)" }}>
                  <span aria-hidden="true" style={{ flex: "none", width: 3, height: 20, borderRadius: 2,
                    background: "var(--gold-500)" }} />
                  <span style={{ fontFamily: "var(--font-sans)", fontSize: 16, fontWeight: 600,
                    color: "var(--ink)", letterSpacing: "-.005em" }}>{t}</span>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </Container>
    </section>
  );
}

// ---------- CURRICULUM SECTION (warm — subtle looping background) ----------
function HomeCurriculum() {
  return (
    <section style={{ position: "relative", overflow: "hidden", background: "var(--parchment)", padding: "104px 0" }}>
      {/* Subtle beige looping background. Drop your Shutterstock clip at assets/beige-loop.mp4
          and register it: <meta name="ext-resource-dependency" content="assets/beige-loop.mp4" data-resource-id="beigeLoop" />
          It then activates automatically. Until then the section stays clean warm parchment. */}
      <React.Fragment>
        <div aria-hidden="true" style={{ position: "absolute", inset: 0, zIndex: 0, pointerEvents: "none" }}>
          <video
            src={(window.__resources && window.__resources.beigeLoop) || "assets/curriculum-loop.mp4"}
            autoPlay muted loop playsInline
            style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%", objectFit: "cover" }}
          ></video>
        </div>
        <div aria-hidden="true" style={{ position: "absolute", inset: 0, zIndex: 0, pointerEvents: "none",
          background: "linear-gradient(180deg, rgba(0,68,134,0.78) 0%, rgba(6,41,79,0.68) 50%, rgba(11,27,43,0.85) 100%)" }} />
        <div aria-hidden="true" style={{ position: "absolute", inset: 0, zIndex: 0, pointerEvents: "none",
          background: "radial-gradient(80% 60% at 50% 45%, rgba(0,174,239,0.18) 0%, rgba(0,174,239,0) 70%)",
          mixBlendMode: "screen" }} />
      </React.Fragment>
      <Container style={{ position: "relative", zIndex: 1 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end",
          flexWrap: "wrap", gap: 24, marginBottom: 16 }}>
          <div style={{ maxWidth: 620 }}>
            <Eyebrow tone="light">The Curriculum</Eyebrow>
            <h2 style={{ fontFamily: "var(--font-display)", textTransform: "uppercase",
              fontSize: "clamp(1.9rem,3.2vw,2.8rem)", letterSpacing: ".015em", color: "#fff",
              margin: "14px 0 0", lineHeight: 1.08 }}>Eight courses.<br />100+ hours.<br />Lifetime access.</h2>
            <GoldRule w={48} style={{ margin: "20px 0 0" }} />
            <p className="ksm-lead" style={{ margin: "22px 0 0", maxWidth: 560, color: "rgba(255,255,255,0.85)" }}>
              From Understanding the Kingdom to Prayer and Spiritual Warfare, KSM's eight on-demand courses give you and your people a shared formation foundation, and the freedom to learn on your own schedule, on any device, for as long as you need it.</p>
          </div>
          <Button variant="enroll" size="md" href="product.html#courses">View All Eight</Button>
        </div>
        <div className="ksm-course-grid-4" style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)",
          gap: 24, marginTop: 40 }}>
          {COURSES.slice(0, 4).map((c, i) => <CourseCard key={c.n} c={c} delay={(i % 2) * 70} />)}
        </div>
      </Container>
    </section>
  );
}

// ---------- WHO WE SERVE CARDS ----------
const SERVE = [
  { key: "church", title: <>Church<br />Leaders</>, img: "assets/serve-church.jpg",
    line: "Raise up a leadership pipeline that doesn't quit on you.",
    href: "#" },
  { key: "corporate", title: "Corporate Professionals", img: "assets/serve-corporate.jpg",
    line: "Where your faith and your professional excellence finally belong in the same room.",
    href: "#" },
  { key: "org", title: "Faith-Based Organizations", img: "assets/serve-org.jpg",
    line: "Equip every person who carries your mission.",
    href: "#" },
];

function ServeCard({ s, delay }) {
  const [hover, setHover] = React.useState(false);
  return (
    <Reveal delay={delay} style={{ height: "100%" }}>
      <a href={s.href} onClick={e => e.preventDefault()} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
        style={{ display: "block", position: "relative", height: 420, borderRadius: 14, overflow: "hidden",
          textDecoration: "none", boxShadow: hover ? "var(--shadow-lg)" : "var(--shadow-sm)",
          transform: hover ? "translateY(-4px)" : "none", transition: "all .3s var(--ease)" }}>
        {s.img ? (
          <img src={s.img} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%",
            objectFit: "cover",
            transform: hover ? "scale(1.06)" : "none", transition: "transform .55s var(--ease)" }} />
        ) : (
          <image-slot id={"serve-home-" + s.key} shape="rect"
            style={{ position: "absolute", inset: 0, width: "100%", height: "100%",
              transform: hover ? "scale(1.06)" : "none", transition: "transform .55s var(--ease)" }}
            placeholder={"Photo — " + s.title}></image-slot>
        )}
        <div aria-hidden="true" style={{ position: "absolute", inset: 0, pointerEvents: "none",
          background: "linear-gradient(180deg, rgba(6,18,32,0.05) 0%, rgba(6,18,32,0.35) 48%, rgba(4,24,45,0.92) 100%)" }} />
        <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, padding: "0 28px 28px" }}>
          <h3 className="ksm-hero-gold" style={{ fontFamily: "var(--font-display)", textTransform: "uppercase", fontWeight: 800,
            fontSize: "clamp(1.45rem,1.9vw,1.85rem)", lineHeight: 1.07, letterSpacing: ".008em",
            margin: 0, display: "inline-block", textWrap: "balance" }}>{s.title}</h3>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: 15.5, lineHeight: 1.5,
            color: "rgba(255,255,255,0.82)", margin: "12px 0 0", maxWidth: 300, textWrap: "pretty" }}>{s.line}</p>
          <span style={{ display: "inline-block", marginTop: 20, fontFamily: "var(--font-label)",
            fontSize: 11.5, fontWeight: 600, letterSpacing: ".12em", textTransform: "uppercase",
            color: "#fff", borderBottom: "1.5px solid var(--gold-500)", paddingBottom: 3 }}>Read More</span>
        </div>
      </a>
    </Reveal>
  );
}

function HomeServe() {
  return (
    <section style={{ background: "#fff", padding: "104px 0" }}>
      <Container>
        <div style={{ textAlign: "center", maxWidth: 680, margin: "0 auto 48px" }}>
          <Eyebrow style={{ textAlign: "center" }}>Who We Serve</Eyebrow>
          <h2 style={{ fontFamily: "var(--font-display)", textTransform: "uppercase",
            fontSize: "clamp(1.9rem,3.2vw,2.8rem)", letterSpacing: ".015em", color: "var(--ink)",
            margin: "14px 0 0", lineHeight: 1.08 }}>Built for the teams who carry a mission</h2>
          <p className="ksm-lead" style={{ margin: "20px auto 0", maxWidth: 640 }}>
            KSM wasn't built for individuals alone. It was built for the communities, congregations, and organizations where every person needs to be pulling in the same direction.<br /><br />Find the path built for your people.</p>
        </div>
        <div className="ksm-serve-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 24 }}>
          {SERVE.map((s, i) => <ServeCard key={s.key} s={s} delay={i * 90} />)}
        </div>
      </Container>
    </section>
  );
}

// ---------- THE TRANSFORMATION ----------
const HOME_STAGES = [
  { icon: "flame", label: "Hunger" },
  { icon: "compass", label: "Discovery" },
  { icon: "layers", label: "Foundation" },
  { icon: "zap", label: "Activation" },
  { icon: "sparkles", label: "Transformation" },
];

function HomeProgression() {
  return (
    <section style={{ background: "var(--ink)", padding: "92px 0", position: "relative", overflow: "hidden" }}>
      <ParallaxLayer aria-hidden="true" speed={26}
        style={{ position: "absolute", inset: 0 }}>
        <img src="assets/event-progression-bg.jpg" alt="" style={{ width: "100%", height: "100%", objectFit: "cover",
          opacity: 0.16 }} />
      </ParallaxLayer>
      <div aria-hidden="true" style={{ position: "absolute", inset: 0,
        background: "linear-gradient(180deg, var(--ink) 0%, rgba(6,18,32,.86) 40%, var(--ink) 100%)" }} />
      <Container style={{ position: "relative" }}>
        <div style={{ textAlign: "center", maxWidth: 640, margin: "0 auto 56px" }}>
          <Eyebrow tone="light" style={{ color: "var(--gold-500)", textAlign: "center" }}>The Transformation</Eyebrow>
          <h2 className="ksm-hero-gold" style={{ fontFamily: "var(--font-display)", textTransform: "uppercase",
            fontSize: "clamp(1.3rem,2.6vw,2.4rem)", letterSpacing: ".015em", margin: "14px 0 0", lineHeight: 1.08,
            whiteSpace: "nowrap", display: "inline-block" }}>
            The journey every leader takes</h2>
        </div>
        <div className="ksm-progression" style={{ display: "flex", alignItems: "flex-start",
          justifyContent: "space-between", gap: 8, position: "relative" }}>
          <div className="ksm-flow-track" aria-hidden="true">
            <div className="ksm-flow-base" />
            <div className="ksm-flow-fill" />
            <div className="ksm-flow-comet" />
          </div>
          {HOME_STAGES.map((st, i) => (
            <Reveal key={st.label} delay={i * 100} style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center",
                position: "relative" }}>
                <div className="ksm-stage-circle" style={{ width: 68, height: 68, borderRadius: "50%",
                  background: "var(--navy-700)", border: "2px solid var(--gold-500)", display: "flex",
                  alignItems: "center", justifyContent: "center", position: "relative", zIndex: 1, marginBottom: 18,
                  animationDelay: (i * (HOME_STAGES.length > 1 ? 0.88 * 7 / (HOME_STAGES.length - 1) : 0)) + "s" }}>
                  <Icon name={st.icon} size={28} color="#fff" stroke={1.8} />
                </div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 14, color: "var(--silver-500)", lineHeight: 1 }}>
                  {i + 1}</div>
                <div style={{ fontFamily: "var(--font-label)", fontSize: 12.5, fontWeight: 600, letterSpacing: ".1em",
                  textTransform: "uppercase", color: "#fff", marginTop: 8 }}>{st.label}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ---------- CLOSING CTA ----------
function HomeClosing({ onWalkthrough }) {
  return (
    <section style={{ background: "#fff", padding: "72px 0 100px" }}>
      <Container>
        <div style={{ position: "relative", overflow: "hidden", borderRadius: 16,
          background: "radial-gradient(120% 140% at 80% -20%, #0A5BA8 0%, rgba(10,91,168,0) 55%), linear-gradient(155deg, #06294F, #0B1B2B)",
          padding: "76px 56px", textAlign: "center" }}>
          <img src={((window.__resources&&window.__resources.crestSeal)||"assets/crest-white.svg")} alt="" aria-hidden="true" style={{ position: "absolute",
            right: "-3%", top: "50%", transform: "translateY(-50%)", height: "160%", opacity: 0.06 }} />
          <div style={{ position: "relative" }}>
            <Reveal><Eyebrow tone="light" style={{ color: "var(--gold-500)" }}>Transform Your World</Eyebrow></Reveal>
            <Reveal delay={80}>
              <h2 style={{ fontFamily: "var(--font-display)", textTransform: "uppercase", color: "#fff",
                fontSize: "clamp(2.1rem,4vw,3.3rem)", letterSpacing: ".015em", lineHeight: 1.06,
                margin: "16px 0 0", textWrap: "balance" }}>Transform your world,<br />starting with your people</h2>
            </Reveal>
            <Reveal delay={140}>
              <p style={{ fontFamily: "var(--font-sans)", fontSize: 18, lineHeight: 1.6,
                color: "rgba(255,255,255,0.8)", maxWidth: 600, margin: "20px auto 32px" }}>
                When your people are formed together, they lead together. Deploy nearly three decades of Kingdom leadership training across your entire community and watch what happens next.</p>
            </Reveal>
            <Reveal delay={200}>
              <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
                <Button variant="enroll" size="lg" onClick={onWalkthrough}>Enroll Now</Button>
                <Button variant="secondary-light" size="lg" href="product.html">View Courses</Button>
              </div>
            </Reveal>
          </div>
        </div>
      </Container>
    </section>
  );
}

// ---------- MOUNT ----------
mountPage({
  active: "home",
  darkHero: true,
  render: (openWalk) => (
    <React.Fragment>
      <HeroSplit
        eyebrow="A Kingdom Leadership Platform · Est. 1995"
        title={<><span className="ksm-heroline">You were made for more.</span><br /><span className="ksm-heroline ksm-hero-gold">So are the people you lead.</span></>}
        sub="Sometimes leaders hit a wall, not because they lack vision, but because no one gave them the framework to carry it. Kingdom School of Ministry equips leaders across churches, organizations, and boardrooms with the spiritual depth, practical tools, and Kingdom principles needed to build something that lasts."
        onWalkthrough={openWalk}
      />
      <HomeVideo />
      <HomeAuthority />
      <HomeCurriculum />
      <HomeServe />
      <HomeProgression />
      <HomeClosing onWalkthrough={openWalk} />
    </React.Fragment>
  )
});