__DEFAULT_EXPORT__ = function CourseLandingPage({ branding, onContactSubmit }) { const b = branding || {}; const course = b.course && typeof b.course === 'object' ? b.course : null; const pc = /^#[0-9a-f]{3,8}$/i.test(b.primaryColor || '') ? b.primaryColor : '#59b5de'; const scRaw = /^#[0-9a-f]{3,8}$/i.test(b.secondaryColor || '') ? b.secondaryColor : ''; const sc = scRaw && scRaw.toLowerCase() !== '#ffffff' && scRaw.toLowerCase() !== '#fff' ? scRaw : '#6b6b6b'; const rgbOf = (hex) => { let h = String(hex || '').replace('#', ''); if (h.length === 3) h = h.split('').map((c) => c + c).join(''); const n = parseInt(h.slice(0, 6), 16); return isNaN(n) ? [89, 181, 222] : [(n >> 16) & 255, (n >> 8) & 255, n & 255]; }; const lum = (rgb) => { const [r, g, bl] = rgb.map((v) => { const c = v / 255; return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4); }); return 0.2126 * r + 0.7152 * g + 0.0722 * bl; }; const ratio = (l1, l2) => (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05); const rgba = (hex, a) => { let h = String(hex || '').replace('#', ''); if (h.length === 3) h = h.split('').map((c) => c + c).join(''); if (h.length < 6) return 'rgba(89,181,222,' + a + ')'; const n = parseInt(h.slice(0, 6), 16); return 'rgba(' + ((n >> 16) & 255) + ',' + ((n >> 8) & 255) + ',' + (n & 255) + ',' + a + ')'; }; const pcText = (() => { let [r, g, bl] = rgbOf(pc); for (let i = 0; i < 12 && ratio(lum([r, g, bl]), 1) < 4.5; i++) { r = Math.round(r * 0.85); g = Math.round(g * 0.85); bl = Math.round(bl * 0.85); } return 'rgb(' + r + ',' + g + ',' + bl + ')'; })(); const btnBg = (() => { let [r, g, bl] = rgbOf(pc); for (let i = 0; i < 16 && ratio(lum([r, g, bl]), 1) < 4.5; i++) { r = Math.round(r * 0.82); g = Math.round(g * 0.82); bl = Math.round(bl * 0.82); } return 'rgb(' + r + ',' + g + ',' + bl + ')'; })(); const placeholderLessons = [ { title: 'Welcome and what to expect', summary: 'A quick tour of the course and how to get the most from each lesson.', durationSeconds: 180 }, { title: 'The big picture', summary: 'The core idea behind everything that follows, explained in plain language.', durationSeconds: 300 }, { title: 'Step-by-step walkthrough', summary: 'Follow along as we work through a real example from start to finish.', durationSeconds: 420 }, { title: 'Common mistakes to avoid', summary: 'The pitfalls that trip most people up, and how to sidestep them.', durationSeconds: 330 }, { title: 'Putting it into practice', summary: 'Turn what you learned into a simple plan you can act on this week.', durationSeconds: 360 }, ]; const title = (course && course.title) || 'Your Course Title'; const subtitle = (course && course.subtitle) || 'A short, practical video course that walks you through everything you need to know, one bite-sized lesson at a time.'; const description = (course && course.description) || ''; const cover = course && typeof course.coverImageUrl === 'string' && course.coverImageUrl ? course.coverImageUrl : ''; const lessons = course && Array.isArray(course.lessons) && course.lessons.length > 0 ? course.lessons : (course ? [] : placeholderLessons); const lessonCount = (course && Number(course.lessonCount)) || lessons.length; const totalSeconds = (course && Number(course.totalSeconds)) || lessons.reduce((s, l) => s + (Number(l && l.durationSeconds) || 0), 0); const fmtRuntime = (s) => { const m = Math.round((Number(s) || 0) / 60); if (m <= 0) return ''; if (m < 60) return m + ' min'; const h = Math.floor(m / 60); const r = m % 60; return h + ' hr' + (r ? ' ' + r + ' min' : ''); }; const fmtDur = (s) => { const n = Math.round(Number(s) || 0); if (n <= 0) return ''; return Math.floor(n / 60) + ':' + String(n % 60).padStart(2, '0'); }; const runtime = fmtRuntime(totalSeconds); const cbRaw = course && course.cobrand && typeof course.cobrand === 'object' ? course.cobrand : null; const cb = cbRaw && cbRaw.realtor && cbRaw.lo && cbRaw.realtor.name && cbRaw.lo.name ? cbRaw : null; const cbNmls = cb ? [cb.lo.nmls ? 'NMLS #' + cb.lo.nmls : '', cb.lo.companyNmls ? 'Company NMLS #' + cb.lo.companyNmls : ''].filter(Boolean).join(' · ') : ''; const cbPeople = cb ? [ { role: 'Your agent', name: cb.realtor.name, company: cb.realtor.company || '', detail: cb.realtor.license ? 'License #' + cb.realtor.license : '', photo: cb.realtor.headshotUrl || '' }, { role: 'Your loan officer', name: cb.lo.name, company: cb.lo.company || '', detail: cbNmls, photo: cb.lo.headshotUrl || '' }, ] : []; const creatorName = (cb && cb.realtor.name) || b.fullName || 'Your Name'; const creatorTitle = b.title || ''; const company = (cb && cb.realtor.company) || b.company || ''; const presentedBy = cb ? cb.realtor.name + ' & ' + cb.lo.name : creatorName; const creatorBio = cb ? cb.realtor.name + (cb.realtor.company ? ' of ' + cb.realtor.company : '') + ' and ' + cb.lo.name + (cb.lo.company ? ' of ' + cb.lo.company : '') + ' put this course together to give you clear, honest answers without the jargon. Every lesson is short and focused, so you can learn at your own pace and feel confident about your next step, from finding the right home to financing it.' : creatorName + (creatorTitle ? ', ' + creatorTitle : '') + (company ? ' at ' + company : '') + ', built this course to give you clear, honest answers without the jargon. Every lesson is short, focused and built around the questions real clients ask every day, so you can learn at your own pace and feel confident about your next step.'; const socials = [ { label: 'Website', href: b.socialLinks && b.socialLinks.website }, { label: 'Facebook', href: b.socialLinks && b.socialLinks.facebook }, { label: 'Instagram', href: b.socialLinks && b.socialLinks.instagram }, { label: 'LinkedIn', href: b.socialLinks && b.socialLinks.linkedin }, { label: 'YouTube', href: b.socialLinks && b.socialLinks.youtube }, ].filter((s) => typeof s.href === 'string' && s.href.trim()); const [form, setForm] = useState({ name: '', email: '', phone: '' }); const [errors, setErrors] = useState({ name: '', email: '', phone: '' }); const [touched, setTouched] = useState({ name: false, email: false, phone: false }); const [status, setStatus] = useState('idle'); const [errorMsg, setErrorMsg] = useState(''); const [openFaq, setOpenFaq] = useState(0); const [showAll, setShowAll] = useState(false); const [logoFailed, setLogoFailed] = useState(false); const nameRef = useRef(null); const emailRef = useRef(null); const phoneRef = useRef(null); const visibleLessons = showAll ? lessons : lessons.slice(0, 8); useEffect(() => { const brand = company || creatorName; document.title = course && course.title ? course.title + ' | ' + brand : brand; }, [course, company, creatorName]); const goEnroll = () => { const el = document.getElementById('enroll'); if (!el) return; const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; el.scrollIntoView({ behavior: reduce ? 'auto' : 'smooth', block: 'start' }); }; const validateField = (field, value) => { const v = String(value || '').trim(); if (field === 'name') return v.length >= 2 ? '' : 'Enter your full name'; if (field === 'email') { if (!v) return 'Enter your email address'; if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)) return 'Enter a valid email address'; return ''; } if (field === 'phone') { if (!v) return ''; const digits = v.replace(/\D/g, ''); if (digits.length !== 10) return 'Enter a 10-digit phone number'; return ''; } return ''; }; const handleChange = (e) => { const { name, value } = e.target; setForm((prev) => ({ ...prev, [name]: value })); }; const handleBlur = (e) => { const { name, value } = e.target; setTouched((prev) => ({ ...prev, [name]: true })); setErrors((prev) => ({ ...prev, [name]: validateField(name, value) })); }; const handleSubmit = async (e) => { e.preventDefault(); if (status === 'sending') return; const next = { name: validateField('name', form.name), email: validateField('email', form.email), phone: validateField('phone', form.phone), }; setErrors(next); setTouched({ name: true, email: true, phone: true }); const refs = { name: nameRef, email: emailRef, phone: phoneRef }; const first = ['name', 'email', 'phone'].find((k) => next[k]); if (first) { if (refs[first].current) refs[first].current.focus(); return; } setStatus('sending'); setErrorMsg(''); try { await onContactSubmit({ name: form.name.trim(), email: form.email.trim(), phone: form.phone.trim(), source: 'course-enroll', message: 'Course signup: ' + title, }); setStatus('sent'); } catch (err) { setErrorMsg((err && err.message) || 'Something went wrong. Please try again.'); setStatus('error'); } }; const faqs = [ { q: 'Is the course really free?', a: 'Yes. There is no cost and no obligation. Enroll with your name and email and you get full access to every lesson.' }, { q: 'How do I get access after I sign up?', a: 'We email you a secure link right away. Open it to create your login and start the first lesson. If you do not see it within a few minutes, check your spam or promotions folder.' }, { q: 'How long does it take?', a: (runtime ? 'About ' + runtime + ' of video in total, split into ' : 'The course is split into ') + (lessonCount || 'a handful of') + ' short lessons. Watch them in one sitting or a few minutes at a time.' }, { q: 'Can I go at my own pace?', a: 'Yes. Your progress is saved automatically, so you can stop anytime and pick up right where you left off, on any device.' }, { q: 'What are the quizzes for?', a: 'Each lesson ends with a quick, low-pressure quiz to help the key ideas stick. You can retake them as often as you like.' }, { q: 'Who can I ask if I have questions?', a: 'Reach out to ' + (cb ? presentedBy : creatorName) + (b.email ? ' at ' + b.email : '') + (b.phone ? ' or ' + b.phone : '') + '. Questions are always welcome.' }, ]; const inputCls = 'cl-input mt-1.5 w-full min-h-11 rounded-xl border border-slate-300 bg-white px-4 py-3 text-[15px] text-slate-900 placeholder:text-slate-400 outline-none'; const Check = () => ( React.createElement('svg', { width: "16", height: "16", viewBox: "0 0 24 24" , fill: "none", stroke: "currentColor", strokeWidth: "2.6", strokeLinecap: "round", strokeLinejoin: "round", 'aria-hidden': "true",}, React.createElement('path', { d: "M20 6L9 17l-5-5" ,} )) ); const css = '.cl-root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;}' + '.cl-display{font-family:Fraunces,Georgia,serif;letter-spacing:-0.02em;}' + '.cl-input:focus-visible{border-color:var(--cl-btn);box-shadow:0 0 0 3px var(--cl-ring);}' + '.cl-root :focus-visible{outline:2px solid var(--cl-btn);outline-offset:3px;}' + '.cl-input:focus-visible{outline:none;}' + '@keyframes clUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}' + '@keyframes clSpin{to{transform:rotate(360deg)}}' + '.cl-up{animation:clUp .7s cubic-bezier(.2,.7,.2,1) both;}' + '.cl-spin{animation:clSpin .8s linear infinite;}' + '@media (prefers-reduced-motion: reduce){.cl-up,.cl-spin{animation:none;}.cl-lift{transition:none;}}'; const fieldError = (id, field) => touched[field] && errors[field] ? ( React.createElement('p', { id: id, className: "mt-1.5 text-sm text-red-700" ,}, errors[field]) ) : null; return ( React.createElement('div', { className: "cl-root min-h-screen bg-[#f4f7f8] text-slate-900 antialiased" , style: { '--cl-btn': btnBg, '--cl-ring': rgba(pc, 0.45) },} , React.createElement('link', { rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,520;9..144,640&family=Inter:wght@400;500;600;700&display=swap",} ) , React.createElement('style', null, css) , React.createElement('header', { className: "sticky top-0 z-30 border-b border-slate-200/80 bg-white/95 backdrop-blur" ,} , React.createElement('div', { className: "mx-auto flex max-w-6xl items-center justify-between gap-3 px-5 py-3 md:px-8" ,} , React.createElement('div', { className: "flex min-w-0 items-center gap-3" ,} , b.logoUrl && !logoFailed ? ( React.createElement('img', { src: b.logoUrl, alt: company || creatorName, className: "h-10 w-auto max-w-[140px] object-contain sm:max-w-[190px] md:h-12" , onError: () => setLogoFailed(true),} ) ) : null , React.createElement('span', { className: (b.logoUrl && !logoFailed ? 'hidden lg:block ' : 'block ') + 'min-w-0',} , React.createElement('span', { className: "block truncate text-sm font-semibold leading-tight text-slate-900 md:text-base" ,}, b.fullName || creatorName) , (company || creatorTitle) && React.createElement('span', { className: "block truncate text-xs text-slate-500" ,}, [creatorTitle, company].filter(Boolean).join(' · ')) ) ) , React.createElement('button', { type: "button", onClick: goEnroll, className: "cl-lift inline-flex min-h-11 shrink-0 items-center justify-center rounded-full px-4 text-sm font-semibold text-white transition hover:opacity-95" , style: { background: btnBg },}, "Enroll free" ) ) ) , React.createElement('main', null , React.createElement('section', { className: "relative overflow-hidden border-b border-slate-200 bg-white" ,} , React.createElement('div', { className: "absolute inset-y-0 left-0 w-1.5" , style: { background: btnBg }, 'aria-hidden': "true",} ) , React.createElement('div', { className: "mx-auto grid max-w-6xl items-center gap-12 px-5 py-14 md:px-8 md:py-20 lg:grid-cols-[1.08fr_0.92fr] lg:gap-16" ,} , React.createElement('div', { className: "cl-up",} , React.createElement('p', { className: "text-xs font-semibold uppercase tracking-[0.16em]" , style: { color: pcText },}, "Free video course" ) , React.createElement('h1', { className: "cl-display mt-3 text-[2.45rem] font-semibold leading-[1.08] text-slate-900 sm:text-5xl md:text-[3.4rem]" ,}, title) , React.createElement('p', { className: "mt-5 max-w-xl text-base leading-relaxed text-slate-600 md:text-lg" ,}, subtitle) , React.createElement('ul', { className: "mt-7 flex flex-wrap gap-2" ,} , [ lessonCount ? lessonCount + ' video lessons' : 'Video lessons', runtime ? runtime + ' total' : 'Self-paced', 'Quizzes included', 'Progress tracking', ].map((t) => ( React.createElement('li', { key: t, className: "rounded-full border border-slate-200 bg-[#f4f7f8] px-3.5 py-1.5 text-[13px] font-medium text-slate-700" ,}, t) )) ) , React.createElement('div', { className: "mt-8 flex flex-col gap-3 sm:flex-row sm:items-center" ,} , React.createElement('button', { type: "button", onClick: goEnroll, className: "cl-lift inline-flex min-h-12 shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-full px-6 py-3 text-base font-semibold text-white" , style: { background: btnBg },}, "Start the course" , React.createElement('svg', { width: "18", height: "18", viewBox: "0 0 24 24" , fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", 'aria-hidden': "true",}, React.createElement('path', { d: "M5 12h14M13 5l7 7-7 7" ,} )) ) , React.createElement('p', { className: "text-sm text-slate-500" ,}, "No cost. No obligation. A link arrives by email." ) ) , cb ? ( React.createElement('div', { className: "mt-10 flex items-center gap-3.5 border-t border-slate-200 pt-6" , 'data-cobrand': "presented-by",} , React.createElement('div', { className: "flex shrink-0" ,} , cbPeople.map((p, i) => p.photo ? ( React.createElement('img', { key: p.role, src: p.photo, alt: p.name, className: 'h-12 w-12 rounded-full border-2 border-white object-cover' + (i ? ' -ml-3' : ''), onError: (e) => { e.currentTarget.style.display = 'none'; },} ) ) : ( React.createElement('div', { key: p.role, className: 'flex h-12 w-12 items-center justify-center rounded-full border-2 border-white text-lg font-semibold text-white' + (i ? ' -ml-3' : ''), style: { background: btnBg },}, String(p.name).charAt(0)) )) ) , React.createElement('div', { className: "min-w-0",} , React.createElement('p', { className: "text-sm text-slate-500" ,}, "Presented by" ) , React.createElement('p', { className: "truncate font-semibold text-slate-900" ,}, presentedBy) , React.createElement('p', { className: "truncate text-xs text-slate-500" ,}, [cb.realtor.company, cb.lo.company].filter(Boolean).join(' & '), cbNmls ? ' · ' + cbNmls : '') ) ) ) : ( React.createElement('div', { className: "mt-10 flex items-center gap-3.5 border-t border-slate-200 pt-6" ,} , b.headshotUrl ? ( React.createElement('img', { src: b.headshotUrl, alt: creatorName, className: "h-14 w-14 rounded-full object-cover ring-2 ring-white" , onError: (e) => { e.currentTarget.style.display = 'none'; },} ) ) : ( React.createElement('div', { className: "flex h-14 w-14 items-center justify-center rounded-full text-lg font-semibold text-white" , style: { background: btnBg },}, String(creatorName).charAt(0)) ) , React.createElement('div', { className: "min-w-0",} , React.createElement('p', { className: "text-sm text-slate-500" ,}, "Taught by" ) , React.createElement('p', { className: "truncate font-semibold text-slate-900" ,}, creatorName) , React.createElement('p', { className: "truncate text-xs text-slate-500" ,}, [creatorTitle, company, b.nmls ? 'NMLS #' + b.nmls : ''].filter(Boolean).join(' · ')) ) ) ) ) , React.createElement('div', { className: "cl-up", style: { animationDelay: '.12s' },} , React.createElement('button', { type: "button", onClick: goEnroll, 'aria-label': 'Enroll to watch ' + title, className: "group block w-full rounded-[1.6rem] border border-slate-200 bg-white p-2 text-left shadow-[0_24px_60px_-32px_rgba(15,23,42,0.35)]" ,} , React.createElement('div', { className: "relative aspect-video overflow-hidden rounded-[1.25rem]" , style: { background: rgba(pc, 0.2) },} , cover ? ( React.createElement('img', { src: cover, alt: "", className: "h-full w-full object-cover" , onError: (e) => { e.currentTarget.style.display = 'none'; },} ) ) : ( React.createElement('div', { className: "cl-display absolute inset-0 flex items-end p-6 text-2xl font-semibold leading-tight text-slate-900 md:text-3xl" ,}, title) ) , React.createElement('span', { className: "absolute inset-0 flex items-center justify-center" ,} , React.createElement('span', { className: "flex h-16 w-16 items-center justify-center rounded-full bg-white shadow-lg md:h-20 md:w-20" ,} , React.createElement('svg', { width: "26", height: "26", viewBox: "0 0 24 24" , className: "ml-1", 'aria-hidden': "true",}, React.createElement('path', { d: "M8 5v14l11-7z" , fill: btnBg,} )) ) ) ) , React.createElement('span', { className: "grid grid-cols-3 divide-x divide-slate-200 px-1 py-4 text-center" ,} , React.createElement('span', null, React.createElement('span', { className: "cl-display block text-2xl font-semibold text-slate-900" ,}, lessonCount || '—'), React.createElement('span', { className: "text-[11px] font-medium uppercase tracking-wider text-slate-500" ,}, "Lessons")) , React.createElement('span', null, React.createElement('span', { className: "cl-display block text-2xl font-semibold text-slate-900" ,}, runtime || '—'), React.createElement('span', { className: "text-[11px] font-medium uppercase tracking-wider text-slate-500" ,}, "Runtime")) , React.createElement('span', null, React.createElement('span', { className: "cl-display block text-2xl font-semibold" , style: { color: pcText },}, "Free"), React.createElement('span', { className: "text-[11px] font-medium uppercase tracking-wider text-slate-500" ,}, "Access")) ) ) ) ) ) , React.createElement('section', { className: "px-5 py-6 md:px-8" , 'aria-label': "How the course works" ,} , React.createElement('div', { className: "mx-auto grid max-w-6xl gap-3 sm:grid-cols-3" ,} , [ { n: '01', t: 'Watch short lessons', d: 'Each video covers one idea, short enough to finish on a break.' }, { n: '02', t: 'Answer a quick quiz', d: 'A few questions after each lesson help the point stick.' }, { n: '03', t: 'Pick up where you left off', d: 'Progress saves on its own, on whichever device you use next.' }, ].map((f) => ( React.createElement('div', { key: f.n, className: "rounded-2xl bg-white px-5 py-5 shadow-[0_1px_0_rgba(15,23,42,0.04)]" ,} , React.createElement('p', { className: "cl-display text-2xl font-semibold" , style: { color: pcText },}, f.n) , React.createElement('p', { className: "mt-2 text-base font-semibold text-slate-900" ,}, f.t) , React.createElement('p', { className: "mt-1.5 text-sm leading-relaxed text-slate-600" ,}, f.d) ) )) ) ) , React.createElement('section', { className: "px-5 py-16 md:px-8 md:py-24" ,} , React.createElement('div', { className: "mx-auto max-w-3xl" ,} , React.createElement('p', { className: "text-xs font-semibold uppercase tracking-[0.16em]" , style: { color: pcText },}, "Curriculum") , React.createElement('h2', { className: "cl-display mt-2 text-3xl font-semibold text-slate-900 md:text-5xl" ,}, "What you'll learn" ) , React.createElement('p', { className: "mt-4 max-w-2xl text-base leading-relaxed text-slate-600 md:text-lg" ,} , description || (lessonCount ? lessonCount + ' short lessons' + (runtime ? ', about ' + runtime + ' in total' : '') + '. Each one covers a single idea, so it sticks.' : 'Lessons are on the way. Enroll now and you will be notified as soon as they are ready.') ) , lessons.length > 0 && ( React.createElement('ol', { className: "mt-10",} , visibleLessons.map((l, i) => ( React.createElement('li', { key: i, className: "grid grid-cols-[2.75rem_1fr] gap-4" ,} , React.createElement('div', { className: "flex flex-col items-center" ,} , React.createElement('span', { className: "flex h-11 w-11 shrink-0 items-center justify-center rounded-full text-sm font-semibold text-white" , style: { background: btnBg },}, i + 1) , i < visibleLessons.length - 1 && React.createElement('span', { className: "my-1 w-0.5 flex-1" , style: { background: sc },} ) ) , React.createElement('div', { className: "mb-5 rounded-2xl bg-white px-4 py-4 md:px-5" ,} , React.createElement('div', { className: "flex flex-col gap-1 sm:flex-row sm:items-baseline sm:justify-between sm:gap-4" ,} , React.createElement('h3', { className: "text-base font-semibold leading-snug text-slate-900 md:text-lg" ,}, (l && l.title) || 'Lesson ' + (i + 1)) , fmtDur(l && l.durationSeconds) && ( React.createElement('p', { className: "inline-flex shrink-0 items-center gap-1.5 text-xs font-medium text-slate-500" ,} , React.createElement('svg', { width: "13", height: "13", viewBox: "0 0 24 24" , fill: "none", stroke: "currentColor", strokeWidth: "2.2", 'aria-hidden': "true",}, React.createElement('circle', { cx: "12", cy: "12", r: "9",} ), React.createElement('path', { d: "M12 7v5l3 2" ,} )) , fmtDur(l.durationSeconds) ) ) ) , l && l.summary && React.createElement('p', { className: "mt-1.5 text-sm leading-relaxed text-slate-600 md:text-[15px]" ,}, l.summary) ) ) )) ) ) , lessons.length > 8 && ( React.createElement('div', { className: "mt-6",} , React.createElement('button', { type: "button", onClick: () => setShowAll((v) => !v), className: "min-h-11 rounded-full border border-slate-300 bg-white px-5 text-sm font-semibold text-slate-800" ,} , showAll ? 'Show fewer lessons' : 'Show all ' + lessons.length + ' lessons' ) ) ) ) ) , cb ? ( React.createElement('section', { className: "border-y border-slate-200 bg-white px-5 py-16 md:px-8 md:py-24" , 'data-cobrand': "guides",} , React.createElement('div', { className: "mx-auto max-w-5xl" ,} , React.createElement('p', { className: "text-xs font-semibold uppercase tracking-[0.16em]" , style: { color: pcText },}, "Presented by" ) , React.createElement('h2', { className: "cl-display mt-2 text-3xl font-semibold text-slate-900 md:text-4xl" ,}, presentedBy) , React.createElement('p', { className: "mt-5 max-w-3xl text-base leading-relaxed text-slate-600 md:text-lg" ,}, creatorBio) , React.createElement('div', { className: "mt-10 grid gap-4 sm:grid-cols-2" ,} , cbPeople.map((p) => ( React.createElement('div', { key: p.role, className: "flex items-center gap-5 rounded-3xl border border-slate-200 bg-[#f4f7f8] p-5" ,} , React.createElement('div', { className: "h-20 w-20 shrink-0 overflow-hidden rounded-2xl md:h-24 md:w-24" , style: { background: rgba(pc, 0.25) },} , p.photo ? ( React.createElement('img', { src: p.photo, alt: p.name, className: "h-full w-full object-cover" , onError: (e) => { e.currentTarget.style.display = 'none'; },} ) ) : ( React.createElement('div', { className: "cl-display flex h-full w-full items-center justify-center text-3xl font-semibold text-white" , style: { background: btnBg },}, String(p.name).charAt(0)) ) ) , React.createElement('div', { className: "min-w-0",} , React.createElement('p', { className: "text-xs font-semibold uppercase tracking-[0.14em]" , style: { color: pcText },}, p.role) , React.createElement('p', { className: "mt-1 text-lg font-semibold text-slate-900" ,}, p.name) , p.company && React.createElement('p', { className: "text-sm text-slate-600" ,}, p.company) , p.detail && React.createElement('p', { className: "mt-1 text-sm text-slate-600" ,}, p.detail) ) ) )) ) ) ) ) : ( React.createElement('section', { className: "border-y border-slate-200 bg-white px-5 py-16 md:px-8 md:py-24" ,} , React.createElement('div', { className: "mx-auto grid max-w-5xl items-center gap-10 md:grid-cols-[0.78fr_1.22fr] md:gap-16" ,} , React.createElement('div', { className: "mx-auto w-full max-w-xs md:max-w-none" ,} , React.createElement('div', { className: "aspect-[4/5] overflow-hidden rounded-[1.6rem]" , style: { background: rgba(pc, 0.22) },} , b.headshotUrl ? ( React.createElement('img', { src: b.headshotUrl, alt: creatorName, className: "h-full w-full object-cover" , onError: (e) => { e.currentTarget.style.display = 'none'; },} ) ) : ( React.createElement('div', { className: "cl-display flex h-full w-full items-center justify-center text-7xl font-semibold text-white" , style: { background: btnBg },}, String(creatorName).charAt(0)) ) ) ) , React.createElement('div', null , React.createElement('p', { className: "text-xs font-semibold uppercase tracking-[0.16em]" , style: { color: pcText },}, "Your instructor" ) , React.createElement('h2', { className: "cl-display mt-2 text-3xl font-semibold text-slate-900 md:text-4xl" ,}, creatorName) , (creatorTitle || company) && React.createElement('p', { className: "mt-2 text-base font-medium text-slate-600" ,}, [creatorTitle, company].filter(Boolean).join(' · ')) , React.createElement('p', { className: "mt-5 text-base leading-relaxed text-slate-600 md:text-lg" ,}, creatorBio) , React.createElement('div', { className: "mt-7 flex flex-col gap-3 text-sm text-slate-700" ,} , b.nmls && React.createElement('p', { className: "inline-flex items-center gap-2" ,}, React.createElement('svg', { width: "16", height: "16", viewBox: "0 0 24 24" , fill: "none", stroke: btnBg, strokeWidth: "2", 'aria-hidden': "true",}, React.createElement('path', { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" ,} )), "NMLS #" , b.nmls, b.companyNmls ? ' · Company NMLS #' + b.companyNmls : '') , b.email && React.createElement('a', { href: 'mailto:' + b.email, className: "inline-flex min-h-11 items-center gap-2 underline decoration-slate-300 underline-offset-4" ,}, React.createElement('svg', { width: "16", height: "16", viewBox: "0 0 24 24" , fill: "none", stroke: btnBg, strokeWidth: "2", 'aria-hidden': "true",}, React.createElement('rect', { x: "3", y: "5", width: "18", height: "14", rx: "2",} ), React.createElement('path', { d: "M3 7l9 6 9-6" ,} )), b.email) , b.phone && React.createElement('a', { href: 'tel:' + String(b.phone).replace(/[^\d+]/g, ''), className: "inline-flex min-h-11 items-center gap-2 underline decoration-slate-300 underline-offset-4" ,}, React.createElement('svg', { width: "16", height: "16", viewBox: "0 0 24 24" , fill: "none", stroke: btnBg, strokeWidth: "2", 'aria-hidden': "true",}, React.createElement('path', { d: "M22 16.92v3a2 2 0 01-2.18 2 19.8 19.8 0 01-8.63-3.07 19.5 19.5 0 01-6-6A19.8 19.8 0 012.1 4.18 2 2 0 014.1 2h3a2 2 0 012 1.72c.13.96.36 1.9.7 2.81a2 2 0 01-.45 2.11L8.1 9.9a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0122 16.92z" ,} )), b.phone) ) , b.meetingLink && ( React.createElement('a', { href: b.meetingLink, target: "_blank", rel: "noopener noreferrer" , className: "cl-lift mt-6 inline-flex min-h-11 items-center justify-center rounded-full border border-slate-300 px-5 text-sm font-semibold text-slate-900" ,}, "Book a conversation" ) ) ) ) ) ) , React.createElement('section', { id: "enroll", className: "scroll-mt-20 px-5 py-16 md:px-8 md:py-24" ,} , React.createElement('div', { className: "mx-auto grid max-w-6xl items-start gap-12 lg:grid-cols-[1fr_0.92fr] lg:gap-16" ,} , React.createElement('div', null , React.createElement('p', { className: "text-xs font-semibold uppercase tracking-[0.16em]" , style: { color: pcText },}, "Enroll free" ) , React.createElement('h2', { className: "cl-display mt-2 text-3xl font-semibold leading-tight text-slate-900 md:text-5xl" ,}, "Start learning in the next five minutes." ) , React.createElement('p', { className: "mt-5 text-base leading-relaxed text-slate-600 md:text-lg" ,}, "Sign up and we'll email you a private link to " , React.createElement('span', { className: "font-semibold text-slate-900" ,}, title), ".") , React.createElement('ul', { className: "mt-8 space-y-3" ,} , [ (lessonCount ? lessonCount + ' ' : '') + 'bite-sized video lessons' + (runtime ? ' (' + runtime + ')' : ''), 'Quick quizzes after each lesson', 'Progress saved across all your devices', cb ? 'Direct access to ' + presentedBy + ' for questions' : 'Direct access to ' + creatorName + ' for questions', ].map((t) => ( React.createElement('li', { key: t, className: "flex items-start gap-3 text-[15px] text-slate-700" ,} , React.createElement('span', { className: "mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-white" , style: { background: btnBg },}, React.createElement(Check, null )) , t ) )) ) ) , React.createElement('div', { className: "rounded-[1.5rem] border border-slate-200 bg-white p-6 shadow-[0_24px_60px_-36px_rgba(15,23,42,0.45)] md:p-8" ,} , status === 'sent' ? ( React.createElement('div', { className: "py-6 text-center cl-up" , role: "status",} , React.createElement('div', { className: "mx-auto mb-5 flex h-14 w-14 items-center justify-center rounded-full text-white" , style: { background: btnBg },} , React.createElement('svg', { width: "26", height: "26", viewBox: "0 0 24 24" , fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", 'aria-hidden': "true",}, React.createElement('rect', { x: "3", y: "5", width: "18", height: "14", rx: "2",} ), React.createElement('path', { d: "M3 7l9 6 9-6" ,} )) ) , React.createElement('h3', { className: "cl-display text-2xl font-semibold text-slate-900 md:text-3xl" ,}, "Check your email to start the course" ) , React.createElement('p', { className: "mx-auto mt-3 max-w-sm text-[15px] leading-relaxed text-slate-600" ,}, "We sent a link to " , React.createElement('span', { className: "font-semibold text-slate-900" ,}, form.email), ". Open it to sign in and watch your first lesson. Don't see it? Check your spam or promotions folder." ) ) ) : ( React.createElement('form', { onSubmit: handleSubmit, noValidate: true, className: "space-y-4",} , React.createElement('div', null , React.createElement('h3', { className: "cl-display text-2xl font-semibold text-slate-900" ,}, "Get free access" ) , React.createElement('p', { className: "mt-1 text-sm text-slate-600" ,}, "Takes about ten seconds. You can unsubscribe anytime." ) ) , React.createElement('div', null , React.createElement('label', { htmlFor: "cl-name", className: "text-sm font-semibold text-slate-800" ,}, "Full name" ) , React.createElement('input', { ref: nameRef, id: "cl-name", name: "name", type: "text", autoComplete: "name", value: form.name, onChange: handleChange, onBlur: handleBlur, placeholder: "Jane Smith" , 'aria-invalid': touched.name && !!errors.name, 'aria-describedby': touched.name && errors.name ? 'cl-name-error' : undefined, className: inputCls + (touched.name && errors.name ? ' border-red-600' : ''),} ) , fieldError('cl-name-error', 'name') ) , React.createElement('div', null , React.createElement('label', { htmlFor: "cl-email", className: "text-sm font-semibold text-slate-800" ,}, "Email") , React.createElement('input', { ref: emailRef, id: "cl-email", name: "email", type: "email", autoComplete: "email", inputMode: "email", value: form.email, onChange: handleChange, onBlur: handleBlur, placeholder: "you@email.com", 'aria-invalid': touched.email && !!errors.email, 'aria-describedby': touched.email && errors.email ? 'cl-email-error' : undefined, className: inputCls + (touched.email && errors.email ? ' border-red-600' : ''),} ) , fieldError('cl-email-error', 'email') ) , React.createElement('div', null , React.createElement('label', { htmlFor: "cl-phone", className: "text-sm font-semibold text-slate-800" ,}, "Phone " , React.createElement('span', { className: "font-normal text-slate-500" ,}, "(optional)")) , React.createElement('input', { ref: phoneRef, id: "cl-phone", name: "phone", type: "tel", autoComplete: "tel", inputMode: "tel", value: form.phone, onChange: handleChange, onBlur: handleBlur, placeholder: "(555) 000-0000" , 'aria-invalid': touched.phone && !!errors.phone, 'aria-describedby': touched.phone && errors.phone ? 'cl-phone-error' : undefined, className: inputCls + (touched.phone && errors.phone ? ' border-red-600' : ''),} ) , fieldError('cl-phone-error', 'phone') ) , React.createElement('button', { type: "submit", disabled: status === 'sending', className: "flex min-h-12 w-full items-center justify-center gap-2 rounded-full px-6 py-3 text-base font-semibold text-white disabled:opacity-70" , style: { background: btnBg },} , status === 'sending' ? ( React.createElement(React.Fragment, null, React.createElement('span', { className: "cl-spin h-5 w-5 rounded-full border-2 border-white/30 border-t-white" ,} ), "Enrolling…") ) : ( 'Enroll free' ) ) , status === 'error' && React.createElement('p', { className: "text-center text-sm text-red-700" , role: "alert",}, errorMsg, " Your entries are still here — try again, or call " , b.phone || 'the team', ".") , React.createElement('p', { className: "text-center text-xs leading-relaxed text-slate-500" ,} , cb ? 'By enrolling you agree to receive course emails and to be contacted by ' + presentedBy + '. We never sell your information.' : 'By enrolling you agree to receive course emails' + (company ? ' from ' + company : '') + (creatorName ? ' and to be contacted by ' + creatorName : '') + '. We never sell your information.' ) ) ) ) ) ) , React.createElement('section', { className: "bg-white px-5 py-16 md:px-8 md:py-24" ,} , React.createElement('div', { className: "mx-auto max-w-3xl" ,} , React.createElement('p', { className: "text-xs font-semibold uppercase tracking-[0.16em]" , style: { color: pcText },}, "FAQ") , React.createElement('h2', { className: "cl-display mt-2 text-3xl font-semibold text-slate-900 md:text-5xl" ,}, "Questions, answered" ) , React.createElement('div', { className: "mt-8 divide-y divide-slate-200 border-y border-slate-200" ,} , faqs.map((f, i) => ( React.createElement('div', { key: f.q,} , React.createElement('button', { type: "button", onClick: () => setOpenFaq(openFaq === i ? -1 : i), 'aria-expanded': openFaq === i, className: "flex min-h-14 w-full items-center justify-between gap-4 py-4 text-left" ,} , React.createElement('span', { className: "text-base font-semibold text-slate-900" ,}, f.q) , React.createElement('span', { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-white" , style: { background: btnBg, transform: openFaq === i ? 'rotate(45deg)' : 'none' },} , React.createElement('svg', { width: "14", height: "14", viewBox: "0 0 24 24" , fill: "none", stroke: "currentColor", strokeWidth: "2.6", strokeLinecap: "round", 'aria-hidden': "true",}, React.createElement('path', { d: "M12 5v14M5 12h14" ,} )) ) ) , openFaq === i && React.createElement('p', { className: "pb-5 text-[15px] leading-relaxed text-slate-600" ,}, f.a) ) )) ) , React.createElement('div', { className: "mt-10",} , React.createElement('button', { type: "button", onClick: goEnroll, className: "inline-flex min-h-12 items-center justify-center rounded-full px-7 text-base font-semibold text-white" , style: { background: btnBg },}, "Enroll free" ) ) ) ) ) , React.createElement('footer', { className: "border-t border-slate-200 bg-[#f4f7f8] px-5 pb-28 pt-10 md:px-8 md:pb-12" ,} , React.createElement('div', { className: "mx-auto max-w-5xl" ,} , React.createElement('div', { className: "flex flex-col items-start gap-4 sm:flex-row sm:items-center sm:justify-between" ,} , b.logoUrl && !logoFailed ? ( React.createElement('img', { src: b.logoUrl, alt: "", className: "h-10 w-auto max-w-[180px] object-contain" , onError: () => setLogoFailed(true),} ) ) : ( React.createElement('p', { className: "font-semibold text-slate-900" ,}, company || creatorName) ) , socials.length > 0 && ( React.createElement('ul', { className: "flex flex-wrap gap-x-4 gap-y-2" ,} , socials.map((s) => ( React.createElement('li', { key: s.label,} , React.createElement('a', { href: s.href, target: "_blank", rel: "noopener noreferrer" , className: "inline-flex min-h-11 items-center text-sm font-medium text-slate-700 underline decoration-slate-300 underline-offset-4" ,}, s.label) ) )) ) ) ) , React.createElement('div', { className: "mt-6 flex flex-wrap gap-x-4 gap-y-1 text-sm text-slate-600" ,} , React.createElement('span', { className: "font-semibold text-slate-800" ,}, company || creatorName) , b.nmls && React.createElement('span', null, "NMLS #" , b.nmls) , b.companyNmls && React.createElement('span', null, "Company NMLS #" , b.companyNmls) , React.createElement('span', null, "Equal Housing Opportunity" ) , b.email && React.createElement('a', { className: "underline decoration-slate-300 underline-offset-4" , href: 'mailto:' + b.email,}, b.email) , b.phone && React.createElement('a', { className: "underline decoration-slate-300 underline-offset-4" , href: 'tel:' + String(b.phone).replace(/[^\d+]/g, ''),}, b.phone) , b.privacyPolicyUrl && React.createElement('a', { className: "underline decoration-slate-300 underline-offset-4" , href: b.privacyPolicyUrl, target: "_blank", rel: "noopener noreferrer" ,}, "Privacy policy" ) ) , b.disclaimer && React.createElement('p', { className: "mt-4 max-w-4xl whitespace-pre-line text-xs leading-relaxed text-slate-600" ,}, b.disclaimer) , cb && ( React.createElement('div', { className: "mt-5 max-w-4xl border-t border-slate-200 pt-5" , 'data-cobrand': "lo-compliance",} , React.createElement('div', { className: "flex flex-wrap gap-x-4 gap-y-1 text-sm text-slate-600" ,} , React.createElement('span', { className: "font-semibold text-slate-800" ,}, cb.lo.name) , cb.lo.company && React.createElement('span', null, cb.lo.company) , cb.lo.nmls && React.createElement('span', null, "NMLS #" , cb.lo.nmls) , cb.lo.companyNmls && React.createElement('span', null, "Company NMLS #" , cb.lo.companyNmls) , React.createElement('span', null, "Equal Housing Opportunity" ) ) , cb.lo.disclaimer && React.createElement('p', { className: "mt-3 whitespace-pre-line text-xs leading-relaxed text-slate-600" ,}, cb.lo.disclaimer) ) ) , React.createElement('p', { className: "mt-4 text-xs leading-relaxed text-slate-600" ,}, "This course is educational and is not a commitment to lend or an offer of credit." ) ) ) , status !== 'sent' && ( React.createElement('div', { className: "fixed inset-x-0 bottom-0 z-40 border-t border-slate-200 bg-white/95 px-4 py-3 backdrop-blur md:hidden" ,} , React.createElement('button', { type: "button", onClick: goEnroll, className: "min-h-12 w-full rounded-full text-[15px] font-semibold text-white" , style: { background: btnBg },}, "Enroll free" , lessonCount ? ' · ' + lessonCount + ' lessons' : '' ) ) ) ) ); }