/* 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 (
{link.label} {isActive && } {/* Hover bridge so the menu doesn't close in the gap between trigger and panel */} ); } function DropItem({ item, compact }) { const [hover, setHover] = useStateSite(false); const click = item.disabled ? (e) => e.preventDefault() : undefined; return ( 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", }}>
{item.label}
{item.sub && (
{item.sub}
)} ); } // ============================ 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 (
{open && (
{NAV_LINKS.map(l => ( 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} {l.children && ( )} ))}
)}
); } // ============================ 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 ( ); } // ====================== WALKTHROUGH MODAL ================================ function WField({ label, children }) { return ( ); } 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 (
e.stopPropagation()} style={{ background: "#fff", borderRadius: 12, width: "100%", maxWidth: 560, boxShadow: "var(--shadow-lg)", overflow: "hidden", animation: "ksmRise .28s var(--ease)", margin: "auto" }}>
For Teams & Organizations
Enroll Now
{sent ? (

Request Received

Thank you. A member of our team will reach out within two business days to schedule a guided walkthrough for your organization.

) : (
{ e.preventDefault(); setSent(true); }} style={{ padding: "28px 30px 30px", display: "flex", flexDirection: "column", gap: 16 }}>

See how KSM equips whole teams. Tell us about your organization and we'll tailor the walkthrough to you.

This is a design-prototype demo. No information is sent.

)}
); } // ====================== PAGE WRAPPER + MOUNT ============================= function SitePage({ active, darkHero, render }) { const [walk, setWalk] = useStateSite(false); const open = React.useCallback(() => setWalk(true), []); return (