/* global React, ReactDOM, Icon, Eyebrow, GoldRule, Pill, Button, Container, Reveal, Wordmark */
const { useState: useStateSite, useEffect: useEffectSite } = React;

const NAV_LINKS = [
  { label: "Home", href: "index.html", key: "home" },
  { label: "Who We Serve", href: "who-we-serve.html", key: "whoweserve",
    children: [
      { label: "Church Leaders", href: "church-leaders.html",
        sub: "Pastors, elders & ministry teams" },
      { label: "Corporate Professionals", href: "corporate-professionals.html",
        sub: "Faith-driven leaders in the marketplace" },
      { label: "Faith-Based Organizations", href: "faith-based-organizations.html",
        sub: "Nonprofits, missions & networks" },
      { label: "Faith-Based Business Owners", href: "faith-based-business-owners.html",
        sub: "Founders & faith-driven entrepreneurs" },
    ] },
  { label: "Courses", href: "product.html", key: "product",
    children: [
      { label: "Understanding the Kingdom", href: "understanding-the-kingdom.html" },
      { label: "Kingdom Economics & Biblical Finance", href: "kingdom-economics.html" },
      { label: "Prayer and Spiritual Warfare", href: "prayer-and-spiritual-warfare.html" },
      { label: "Prophets & Prophecy", href: "prophets-and-prophecy.html" },
      { label: "Purpose of the Church", href: "purpose-of-the-church.html" },
      { label: "Order in the House", href: "order-in-the-house.html" },
      { label: "Praise and Worship", href: "praise-and-worship.html" },
      { label: "Ministry of Helps and Hospitality", href: "ministry-of-helps.html" },
    ], childrenLayout: "grid" },
  { label: "Resources", href: "resources.html", key: "resources" },
  { label: "Events", href: "event.html", key: "event" },
];

// ============================ NAV DROPDOWN ===============================
function NavDropdown({ link, solid, isActive, linkColor }) {
  const [open, setOpen] = useStateSite(false);
  const closeTimer = React.useRef(null);
  const onEnter = () => { if (closeTimer.current) clearTimeout(closeTimer.current); setOpen(true); };
  const onLeave = () => { closeTimer.current = setTimeout(() => setOpen(false), 120); };
  const handleTriggerClick = link.disabled ? (e) => e.preventDefault() : undefined;
  const isGrid = link.childrenLayout === "grid";

  return (
    <div onMouseEnter={onEnter} onMouseLeave={onLeave} style={{ position: "relative" }}>
      <a href={link.disabled ? "#" : link.href} onClick={handleTriggerClick} style={{
        position: "relative", display: "inline-flex", alignItems: "center", gap: 6,
        fontFamily: "var(--font-label)", fontSize: 12.5, fontWeight: 600,
        letterSpacing: ".09em", textTransform: "uppercase",
        color: isActive ? (solid ? "var(--navy-700)" : "#fff") : (open ? "var(--gold-500)" : linkColor),
        textDecoration: "none", transition: "color .2s", paddingBottom: 4,
        cursor: link.disabled ? "default" : "pointer"
      }}>
        {link.label}
        <svg width="9" height="9" viewBox="0 0 10 10" style={{
          transition: "transform .2s var(--ease)",
          transform: open ? "rotate(180deg)" : "rotate(0deg)" }}>
          <path d="M2 3.5 L5 6.5 L8 3.5" stroke="currentColor" strokeWidth="1.6"
            strokeLinecap="round" strokeLinejoin="round" fill="none" />
        </svg>
        {isActive && <span style={{ position: "absolute", left: 0, right: 14, bottom: -2, height: 2,
          background: "var(--gold-500)" }} />}
      </a>

      {/* Hover bridge so the menu doesn't close in the gap between trigger and panel */}
      <div aria-hidden="true" style={{ position: "absolute", top: "100%", left: 0, right: 0,
        height: 14, pointerEvents: open ? "auto" : "none" }} />

      <div style={{
        position: "absolute", top: "calc(100% + 14px)",
        left: isGrid ? "50%" : 0,
        transform: open
          ? (isGrid ? "translate(-50%, 0)" : "translateY(0)")
          : (isGrid ? "translate(-50%, -6px)" : "translateY(-6px)"),
        minWidth: isGrid ? 560 : 280,
        background: "#fff",
        border: "1px solid var(--line)",
        borderTop: "3px solid var(--gold-500)",
        borderRadius: 6,
        boxShadow: "0 18px 44px -12px rgba(6,18,32,0.22), 0 2px 6px rgba(6,18,32,0.08)",
        padding: isGrid ? "18px 18px 16px" : "10px 0",
        opacity: open ? 1 : 0,
        visibility: open ? "visible" : "hidden",
        transition: "opacity .18s var(--ease), transform .22s var(--ease), visibility .22s",
        pointerEvents: open ? "auto" : "none",
        zIndex: 60,
      }}>
        {isGrid ? (
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "4px 22px" }}>
            {link.children.map(c => <DropItem key={c.label} item={c} compact />)}
          </div>
        ) : (
          link.children.map(c => <DropItem key={c.label} item={c} />)
        )}
      </div>
    </div>
  );
}

function DropItem({ item, compact }) {
  const [hover, setHover] = useStateSite(false);
  const click = item.disabled ? (e) => e.preventDefault() : undefined;
  return (
    <a href={item.disabled ? "#" : item.href} onClick={click}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        display: "block",
        padding: compact ? "9px 12px" : "11px 22px",
        textDecoration: "none",
        borderRadius: 4,
        background: hover ? "rgba(201,162,75,0.08)" : "transparent",
        cursor: item.disabled ? "default" : "pointer",
        transition: "background .15s var(--ease)",
        borderLeft: compact ? "2px solid " + (hover ? "var(--gold-500)" : "transparent") : "none",
      }}>
      <div style={{ fontFamily: "var(--font-label)", fontSize: 12, fontWeight: 600,
        letterSpacing: ".06em", textTransform: "uppercase",
        color: hover ? "var(--navy-700)" : "var(--ink)", transition: "color .15s" }}>
        {item.label}
      </div>
      {item.sub && (
        <div style={{ fontFamily: "var(--font-sans)", fontSize: 12.5, color: "var(--slate)",
          marginTop: 3, textTransform: "none", letterSpacing: 0, fontWeight: 400 }}>
          {item.sub}
        </div>
      )}
    </a>
  );
}

// ============================ NAV ========================================
function Nav({ active, darkHero, onWalkthrough }) {
  const [scrolled, setScrolled] = useStateSite(false);
  const [open, setOpen] = useStateSite(false);
  useEffectSite(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const solid = !darkHero || scrolled || open;
  const linkColor = solid ? "var(--slate)" : "rgba(255,255,255,0.86)";

  return (
    <header style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 50,
      background: solid ? "rgba(255,255,255,0.94)" : "transparent",
      backdropFilter: solid ? "saturate(180%) blur(12px)" : "none",
      borderBottom: solid ? "1px solid var(--line)" : "1px solid transparent",
      boxShadow: scrolled && solid ? "var(--shadow-sm)" : "none",
      transition: "all .3s var(--ease)"
    }}>
      <Container style={{ display: "flex", alignItems: "center", justifyContent: "space-between", height: 78 }}>
        <Wordmark dark={!solid} crestHeight={62} />

        <nav className="ksm-desktop-nav" style={{ display: "flex", alignItems: "center", gap: 34 }}>
          {NAV_LINKS.map(l => {
            const isActive = l.key === active;
            if (l.children) {
              return <NavDropdown key={l.key} link={l} solid={solid} isActive={isActive} linkColor={linkColor} />;
            }
            const handleClick = l.disabled ? (e) => e.preventDefault() : undefined;
            return (
              <a key={l.key} href={l.disabled ? "#" : l.href} onClick={handleClick} style={{
                position: "relative", fontFamily: "var(--font-label)", fontSize: 12.5, fontWeight: 600,
                letterSpacing: ".09em", textTransform: "uppercase",
                color: isActive ? (solid ? "var(--navy-700)" : "#fff") : linkColor,
                textDecoration: "none", transition: "color .2s", paddingBottom: 4,
                cursor: l.disabled ? "default" : "pointer"
              }}
                onMouseEnter={e => e.currentTarget.style.color = solid ? "var(--navy-700)" : "#fff"}
                onMouseLeave={e => e.currentTarget.style.color = isActive ? (solid ? "var(--navy-700)" : "#fff") : linkColor}>
                {l.label}
                {isActive && <span style={{ position: "absolute", left: 0, right: 0, bottom: -2, height: 2,
                  background: "var(--gold-500)" }} />}
              </a>
            );
          })}
          <Button variant="enroll" size="sm" onClick={onWalkthrough}>Enroll Now</Button>
        </nav>

        <button className="ksm-burger" onClick={() => setOpen(o => !o)} style={{
          display: "none", background: "none", border: "none", cursor: "pointer",
          color: solid ? "var(--navy-700)" : "#fff", padding: 6
        }}>
          <Icon name={open ? "x" : "menu"} size={26} />
        </button>
      </Container>

      {open && (
        <div style={{ borderTop: "1px solid var(--line)", background: "#fff", padding: "12px 0" }}>
          <Container style={{ display: "flex", flexDirection: "column", gap: 2 }}>
            {NAV_LINKS.map(l => (
              <React.Fragment key={l.key}>
                <a href={l.disabled ? "#" : l.href}
                  onClick={l.disabled ? (e) => e.preventDefault() : undefined}
                  style={{
                  fontFamily: "var(--font-label)", fontSize: 13, fontWeight: 600, letterSpacing: ".08em",
                  textTransform: "uppercase", color: l.key === active ? "var(--navy-700)" : "var(--slate)",
                  textDecoration: "none", padding: "13px 4px",
                  cursor: l.disabled ? "default" : "pointer" }}>{l.label}</a>
                {l.children && (
                  <div style={{ display: "flex", flexDirection: "column", gap: 2,
                    padding: "2px 0 6px 14px", borderLeft: "2px solid var(--gold-500)", marginLeft: 4 }}>
                    {l.children.map(c => (
                      <a key={c.label} href={c.disabled ? "#" : c.href}
                        onClick={c.disabled ? (e) => e.preventDefault() : undefined}
                        style={{ fontFamily: "var(--font-label)", fontSize: 11.5, fontWeight: 500,
                          letterSpacing: ".06em", textTransform: "uppercase",
                          color: "var(--slate)", textDecoration: "none", padding: "7px 4px",
                          cursor: c.disabled ? "default" : "pointer" }}>{c.label}</a>
                    ))}
                  </div>
                )}
              </React.Fragment>
            ))}
            <div style={{ marginTop: 10 }}>
              <Button variant="enroll" size="md" onClick={() => { setOpen(false); onWalkthrough(); }}
                style={{ width: "100%", justifyContent: "center" }}>Enroll Now</Button>
            </div>
          </Container>
        </div>
      )}
    </header>
  );
}

// ============================ FOOTER =====================================
function Footer({ onWalkthrough }) {
  const cols = [
    ["Explore", [
      ["Home", "index.html"],
      ["Who We Serve", "who-we-serve.html"],
      ["Courses", "product.html"],
      ["Resources", "resources.html"],
      ["Events", "event.html"],
    ]],
    ["The Curriculum", [
      ["Eight Courses", "product.html#courses"],
      ["How It Works", "product.html#how"],
      ["For Teams", "product.html#cta"],
    ]],
    ["Connect", [
      ["Enroll Now", "#", false, "enroll"],
      ["Contact Us", "#", true],
      ["Privacy", "#", true],
      ["Terms", "#", true],
    ]],
  ];
  return (
    <footer style={{ background: "var(--ink)", color: "#fff" }}>
      {/* CTA band */}
      <div style={{ borderBottom: "1px solid rgba(255,255,255,0.1)" }}>
        <Container style={{ display: "flex", alignItems: "center", justifyContent: "space-between",
          flexWrap: "wrap", gap: 24, padding: "44px 32px" }}>
          <div>
            <div className="ksm-hero-gold" style={{ fontFamily: "var(--font-display)", fontSize: "clamp(1.5rem,2.6vw,2.1rem)",
              textTransform: "uppercase", letterSpacing: ".02em", lineHeight: 1.1, fontWeight: 800, display: "inline-block" }}>
              Bring KSM to your whole team</div>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: 15, color: "rgba(255,255,255,0.6)",
              margin: "8px 0 0" }}>See the platform in action with a guided walkthrough.</p>
          </div>
          <Button variant="enroll" size="lg" onClick={onWalkthrough}>Enroll Now</Button>
        </Container>
      </div>

      <Container style={{ paddingTop: 64 }}>
        <div className="ksm-footer" style={{ display: "grid",
          gridTemplateColumns: "1.5fr 1fr 1fr 1fr", gap: 44, paddingBottom: 52 }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 13, marginBottom: 18 }}>
              <img src={((window.__resources&&window.__resources.crestWhite)||"assets/logo-crest-white.png")} alt="Kingdom School of Ministry crest" style={{ height: 62, width: "auto", display: "block" }} />
              <img src={((window.__resources&&window.__resources.wordWhite)||"assets/logo-wordmark-white.png")} alt="Kingdom School of Ministry" style={{ height: 39, width: "auto", display: "block" }} />
            </div>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: 14, lineHeight: 1.6,
              color: "rgba(255,255,255,0.6)", maxWidth: 300, margin: "0 0 20px" }}>
              Equipping ordinary believers to become extraordinary Kingdom leaders. Since 1995 by Dr. Cindy Trimm.</p>
            <div style={{ display: "flex", flexDirection: "column", gap: 6, fontFamily: "var(--font-sans)",
              fontSize: 14, lineHeight: 1.55, color: "rgba(255,255,255,0.68)" }}>
              <div>950 Eagles Landing Parkway #347</div>
              <div>Stockbridge, GA 30281</div>
              <div style={{ marginTop: 6 }}>Phone: <a href="tel:+16785659888" style={{ color: "rgba(255,255,255,0.68)", textDecoration: "none" }}
                onMouseEnter={e => e.currentTarget.style.color = "#fff"}
                onMouseLeave={e => e.currentTarget.style.color = "rgba(255,255,255,0.68)"}>(678) 565-9888</a></div>
            </div>
          </div>
          {cols.map(([h, items]) => (
            <div key={h}>
              <div style={{ fontFamily: "var(--font-label)", fontSize: 11, fontWeight: 600,
                letterSpacing: ".16em", textTransform: "uppercase", color: "var(--gold-500)", marginBottom: 16 }}>{h}</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 11 }}>
                {items.map(([label, href, disabled, action]) => {
                  const isEnroll = action === "enroll";
                  const handleClick = isEnroll
                    ? (e) => { e.preventDefault(); onWalkthrough(); }
                    : disabled
                      ? (e) => e.preventDefault()
                      : undefined;
                  return (
                    <a key={label} href={href} onClick={handleClick} style={{ fontFamily: "var(--font-sans)", fontSize: 14,
                      color: "rgba(255,255,255,0.68)", textDecoration: "none",
                      cursor: (disabled && !isEnroll) ? "default" : "pointer" }}
                      onMouseEnter={e => e.currentTarget.style.color = "#fff"}
                      onMouseLeave={e => e.currentTarget.style.color = "rgba(255,255,255,0.68)"}>{label}</a>
                  );
                })}
              </div>
            </div>
          ))}
        </div>
        <div style={{ borderTop: "1px solid rgba(255,255,255,0.12)", padding: "22px 0 34px",
          display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12,
          fontFamily: "var(--font-label)", fontSize: 11, letterSpacing: ".06em",
          textTransform: "uppercase", color: "rgba(255,255,255,0.45)" }}>
          <span>© 2026 Kingdom School of Ministry · Since 1995</span>
          <a href="https://creativevelocityagency.com" target="_blank" rel="noopener"
            style={{ display: "inline-flex", alignItems: "center", gap: 7, color: "rgba(255,255,255,0.45)",
              textDecoration: "none" }}
            onMouseEnter={e => e.currentTarget.querySelector("b").style.color = "#E11D2A"}
            onMouseLeave={e => e.currentTarget.querySelector("b").style.color = "rgba(255,255,255,0.72)"}>
            <span>Designed &amp; built by</span>
            <b style={{ fontWeight: 700, letterSpacing: ".1em", color: "rgba(255,255,255,0.72)",
              transition: "color var(--dur) var(--ease)" }}>Creative Velocity</b>
          </a>
          <span style={{ display: "flex", gap: 22 }}>
            <a href="#" onClick={e => e.preventDefault()} style={{ color: "inherit", textDecoration: "none", cursor: "default" }}>Privacy</a>
            <a href="#" onClick={e => e.preventDefault()} style={{ color: "inherit", textDecoration: "none", cursor: "default" }}>Terms</a>
          </span>
        </div>
      </Container>
    </footer>
  );
}

// ====================== WALKTHROUGH MODAL ================================
function WField({ label, children }) {
  return (
    <label style={{ display: "block" }}>
      <span style={{ display: "block", fontFamily: "var(--font-label)", fontSize: 11, fontWeight: 600,
        letterSpacing: ".1em", textTransform: "uppercase", color: "var(--slate)", marginBottom: 7 }}>{label}</span>
      {children}
    </label>
  );
}
const wInput = {
  width: "100%", boxSizing: "border-box", fontFamily: "var(--font-sans)", fontSize: 15,
  padding: "12px 14px", border: "1px solid var(--line)", borderRadius: 6, color: "var(--ink)",
  background: "#fff", outline: "none"
};

function WalkthroughModal({ open, onClose }) {
  const [sent, setSent] = useStateSite(false);
  useEffectSite(() => {
    if (open) { setSent(false); document.body.style.overflow = "hidden"; }
    else document.body.style.overflow = "";
    const onKey = e => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);
  if (!open) return null;

  return (
    <div onClick={onClose} style={{
      position: "fixed", inset: 0, zIndex: 100, background: "rgba(6,18,32,0.6)",
      backdropFilter: "blur(4px)", display: "flex", alignItems: "center", justifyContent: "center",
      padding: 20, animation: "ksmFade .2s var(--ease)", overflowY: "auto"
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        background: "#fff", borderRadius: 12, width: "100%", maxWidth: 560, boxShadow: "var(--shadow-lg)",
        overflow: "hidden", animation: "ksmRise .28s var(--ease)", margin: "auto"
      }}>
        <div style={{ background: "var(--navy-700)", padding: "26px 30px", position: "relative",
          display: "flex", alignItems: "center", gap: 14 }}>
          <img src={((window.__resources&&window.__resources.crestSeal)||"assets/crest-white.svg")} alt="" style={{ height: 42 }} />
          <div>
            <div style={{ fontFamily: "var(--font-label)", fontSize: 10, fontWeight: 600,
              letterSpacing: ".18em", textTransform: "uppercase", color: "var(--gold-500)" }}>For Teams & Organizations</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 24, color: "#fff",
              textTransform: "uppercase", letterSpacing: ".02em", marginTop: 2 }}>Enroll Now</div>
          </div>
          <button onClick={onClose} style={{ position: "absolute", top: 18, right: 18, background: "none",
            border: "none", cursor: "pointer", color: "rgba(255,255,255,0.7)", padding: 4 }}>
            <Icon name="x" size={22} />
          </button>
        </div>

        {sent ? (
          <div style={{ padding: "52px 34px", textAlign: "center" }}>
            <div style={{ width: 64, height: 64, borderRadius: "50%", background: "var(--success-bg)",
              display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 20px" }}>
              <Icon name="check" size={32} stroke={2.4} color="var(--success)" />
            </div>
            <h3 style={{ fontFamily: "var(--font-display)", fontSize: 26, textTransform: "uppercase",
              letterSpacing: ".02em", color: "var(--ink)", margin: "0 0 10px" }}>Request Received</h3>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: 15.5, lineHeight: 1.6, color: "var(--slate)",
              maxWidth: 400, margin: "0 auto 26px" }}>Thank you. A member of our team will reach out within
              two business days to schedule a guided walkthrough for your organization.</p>
            <Button variant="enroll" size="md" onClick={onClose}>Close</Button>
          </div>
        ) : (
          <form onSubmit={e => { e.preventDefault(); setSent(true); }}
            style={{ padding: "28px 30px 30px", display: "flex", flexDirection: "column", gap: 16 }}>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: 14.5, lineHeight: 1.6, color: "var(--slate)", margin: 0 }}>
              See how KSM equips whole teams. Tell us about your organization and we'll tailor the walkthrough to you.</p>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
              <WField label="Full Name"><input required style={wInput} placeholder="Jane Doe" /></WField>
              <WField label="Work Email"><input required type="email" style={wInput} placeholder="you@org.com" /></WField>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
              <WField label="Organization"><input required style={wInput} placeholder="Grace Community Church" /></WField>
              <WField label="Your Role">
                <select style={wInput}>
                  <option>Senior / Lead Pastor</option>
                  <option>Executive Pastor</option>
                  <option>Ministry Director</option>
                  <option>L&D / People Leader</option>
                  <option>Nonprofit / Org Leader</option>
                  <option>Other</option>
                </select>
              </WField>
            </div>
            <WField label="People to equip">
              <select style={wInput}>
                <option>1–25</option><option>26–100</option><option>101–500</option><option>500+</option>
              </select>
            </WField>
            <Button variant="enroll" size="lg" type="submit"
              style={{ width: "100%", justifyContent: "center", marginTop: 4 }}>Enroll Now</Button>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: 12, color: "var(--mute)", textAlign: "center",
              margin: 0 }}>This is a design-prototype demo. No information is sent.</p>
          </form>
        )}
      </div>
    </div>
  );
}

// ====================== PAGE WRAPPER + MOUNT =============================
function SitePage({ active, darkHero, render }) {
  const [walk, setWalk] = useStateSite(false);
  const open = React.useCallback(() => setWalk(true), []);
  return (
    <React.Fragment>
      <Nav active={active} darkHero={darkHero} onWalkthrough={open} />
      <main>{render(open)}</main>
      <Footer onWalkthrough={open} />
      <WalkthroughModal open={walk} onClose={() => setWalk(false)} />
    </React.Fragment>
  );
}

window.mountPage = function (opts) {
  ReactDOM.createRoot(document.getElementById("root")).render(
    <SitePage active={opts.active} darkHero={opts.darkHero} render={opts.render} />
  );
};

Object.assign(window, { Nav, Footer, WalkthroughModal, SitePage });
