// Soulforce Arts — Perform Without Pain page app
const { useState: useStateA, useEffect: useEffectA } = React;

function PwpHeader({ onCTA, onOpenMenu, scrolled, enrollment }) {
  const links = [
    { href: '/', label: 'Home' },
    { href: '/tensionreset', label: 'Free Lab' },
    { href: '/pwp', label: 'Perform Without Pain', current: true },
    { href: '/book', label: 'The Book' },
    { href: '/about', label: 'About' },
  ];
  const open = enrollment === 'open';
  return (
    <header className={`header ${scrolled ? 'scrolled' : ''}`}>
      <a className="brand" href="/" aria-label="Soulforce Arts Institute — Home">
        <img src="assets/logo-gold-wide-light.png" alt="Soulforce Arts Institute" />
      </a>
      <div className="header-right">
        <nav aria-label="Primary">{links.map((l) => <a key={l.label} href={l.href} className={l.current ? 'current' : ''}>{l.label}</a>)}</nav>
        <div className="cta-row">
          <button className="btn sm" onClick={() => onCTA(open ? 'call' : 'waitlist')}>{open ? 'Apply' : 'Join the list'}</button>
          <button className="menu-toggle" onClick={onOpenMenu} aria-label="Menu">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M3 7h18M3 12h18M3 17h18" /></svg>
          </button>
        </div>
      </div>
    </header>
  );
}

function PwpDrawer({ open, onClose, onCTA, enrollment }) {
  const enrollOpen = enrollment === 'open';
  return (
    <div className={`mob-drawer ${open ? 'open' : ''}`}>
      <a href="/" onClick={onClose}>Home</a>
      <a href="/tensionreset" onClick={onClose}>Free Lab</a>
      <a href="/pwp" onClick={onClose}>Perform Without Pain</a>
      <a href="/book" onClick={onClose}>The Book</a>
      <a href="/about" onClick={onClose}>About</a>
      <div className="ctas">
        <button className="btn" onClick={() => { onClose(); onCTA(enrollOpen ? 'call' : 'waitlist'); }}>{enrollOpen ? 'Apply now' : 'Join the waiting list'}</button>
        <button className="btn outline" onClick={() => { onClose(); onCTA('pathform'); }}>Find your path</button>
      </div>
    </div>
  );
}

// Enrollment runs in quarterly cohorts, so the page has two states controlled
// by one setting. Flip "enrollment" to "open" when a cohort opens; set "applyBy"
// (e.g. "March 15") and "spots" (e.g. "12") to power the open-state copy.
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "ensoIntensity": "subtle",
  "density": "regular",
  "enrollment": "closed",
  "applyBy": "",
  "spots": "12"
}/*EDITMODE-END*/;

function PwpApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [modal, setModal] = useStateA(null);
  const [menuOpen, setMenuOpen] = useStateA(false);
  const [scrolled, setScrolled] = useStateA(false);

  useEffectA(() => {
    document.body.classList.toggle('enso-off', t.ensoIntensity === 'off');
    document.body.classList.toggle('enso-subtle', t.ensoIntensity === 'subtle');
    document.body.classList.toggle('enso-prominent', t.ensoIntensity === 'prominent');
    document.body.classList.remove('density-compact', 'density-comfy');
    if (t.density === 'compact') document.body.classList.add('density-compact');
    if (t.density === 'comfy') document.body.classList.add('density-comfy');
  }, [t.ensoIntensity, t.density]);

  useEffectA(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const openCTA = (kind) => {
    if (kind === 'call') setModal('call');
    else if (kind === 'chapter') setModal('chapter');
    else if (kind === 'waitlist') setModal('waitlist');
    else if (kind === 'pathform' || kind === 'intake') setModal({ kind: 'intake', source: 'PWP' });
  };

  const enrollment = t.enrollment === 'open' ? 'open' : 'closed';
  const applyBy = (t.applyBy || '').trim();
  const spots = (t.spots || '').trim();
  const enroll = { enrollment, applyBy, spots };

  return (
    <>
      <PwpHeader onCTA={openCTA} onOpenMenu={() => setMenuOpen(true)} scrolled={scrolled} enrollment={enrollment} />
      <PwpDrawer open={menuOpen} onClose={() => setMenuOpen(false)} onCTA={openCTA} enrollment={enrollment} />

      <main id="top" className="page">
        <PwpHero onCTA={openCTA} {...enroll} />
        <Problem />
        <Reframe />
        <WithJoseph />
        <WhatLearn />
        <TwoWays onCTA={openCTA} {...enroll} />
        <WhoFor />
        <WhereLeads onCTA={openCTA} />
        <Wall />
        <Faq />
        <WaitlistSection {...enroll} onCTA={openCTA} />
        <FinalCTA onCTA={openCTA} {...enroll} />
      </main>

      <PwpFooter />

      {modal === 'call' && <ExploratoryCallModal onClose={() => setModal(null)} />}
      {modal === 'chapter' && <FreeChapterModal onClose={() => setModal(null)} />}
      {modal === 'waitlist' && <WaitlistModal source="PWP modal" onClose={() => setModal(null)} />}
      {modal && typeof modal === 'object' && modal.kind === 'intake' && (
        <IntakeModal source={modal.source} onClose={() => setModal(null)} onChapter={() => setModal('chapter')} />
      )}

      <TweaksPanel title="Tweaks">
        <TweakSection label="Enrollment" />
        <TweakRadio label="Doors" value={t.enrollment} options={['closed', 'open']} onChange={(v) => setTweak('enrollment', v)} />
        <TweakText label="Apply by" value={t.applyBy} placeholder="e.g. March 15" onChange={(v) => setTweak('applyBy', v)} />
        <TweakText label="Spots" value={t.spots} placeholder="e.g. 12" onChange={(v) => setTweak('spots', v)} />
        <TweakSection label="Enso" />
        <TweakRadio label="Intensity" value={t.ensoIntensity} options={['off', 'subtle', 'prominent']} onChange={(v) => setTweak('ensoIntensity', v)} />
        <TweakSection label="Page rhythm" />
        <TweakRadio label="Whitespace" value={t.density} options={['compact', 'regular', 'comfy']} onChange={(v) => setTweak('density', v)} />
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<PwpApp />);