// proposal-slides.jsx — PowerPoint-style deck

const PhoneMock = ({ children, lg }) => {
  const w = lg ? 260 : 220;
  const scale = (w - 12) / 375;
  const h = 760 * scale;
  return (
    <div className={`phone-mock${lg ? ' phone-mock--lg' : ''}`}>
      <div className="phone-mock__status">
        <span>9:41</span>
        <div className="phone-mock__notch" />
        <span style={{ fontSize: 10 }}>●●●●</span>
      </div>
      <div className="phone-mock__screen" style={{ height: h }}>
        <div className="phone-mock__inner" style={{ transform: `scale(${scale})`, height: 760 }}>
          {children}
        </div>
      </div>
    </div>
  );
};

const DesktopMock = ({ children }) => {
  const [scale, setScale] = React.useState(0.45);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current?.parentElement;
    if (!el) return;
    const update = () => setScale(el.offsetWidth / 1280);
    update();
    const ro = new ResizeObserver(update);
    ro.observe(el);
    return () => ro.disconnect();
  }, []);
  return (
    <div ref={ref} className="desktop-mock" style={{ height: 800 * scale }}>
      <div className="desktop-mock__inner" style={{ transform: `scale(${scale})` }}>{children}</div>
    </div>
  );
};

const SlideFooter = ({ num, label }) => (
  <div className="slide__footer"><span>{num} · {label}</span></div>
);

// Reusable CRM carousel slide
const CRMSlide = ({ title, num, footerLabel, callouts, screenData }) => {
  const [screen, setScreen] = React.useState(0);
  
  const TabNav = () => (
    <div className="crm-tab-nav" style={{ display: 'flex', gap: 8 }}>
      {screenData.map((s, i) => (
        <button key={i} className="crm-tab-btn" onClick={() => setScreen(i)}
          style={{ padding: '8px 16px', borderRadius: 999, border: 'none', fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
            background: i === screen ? '#4B0082' : '#EAEBEE', color: i === screen ? '#fff' : '#5A6670',
            boxShadow: '0 2px 4px rgba(0,0,0,0.05)' }}>{s.label}</button>
      ))}
    </div>
  );

  return (
    <div className="slide">
      <div className="mobile-only-tabs" style={{ position: 'absolute', top: 24, left: 0, width: '100%', zIndex: 50, justifyContent: 'center' }}>
        <TabNav />
      </div>
      <div className="slide__left" style={{ flex: '0 0 35%', paddingRight: 24 }}>
        <div className="deck-overline enter e-up">Staff CRM</div>
        <h2 className="deck-h2 enter e-up d1" dangerouslySetInnerHTML={{ __html: title }} style={{ marginBottom: 24 }} />
        <div className="enter e-up d2">
          {callouts.map(([cls, t, d], i) => (
            <div key={i} className={`callout ${cls}`} style={{ marginBottom: 16 }}>
              <div className="callout__title" style={{ fontSize: 18 }}>{t}</div>
              <div className="callout__body" style={{ fontSize: 15 }}>{d}</div>
            </div>
          ))}
        </div>
        <div className="enter e-up d3 desktop-only-tabs" style={{ marginTop: 24 }}>
          <TabNav />
        </div>
      </div>
      <div className="slide__right enter e-scale d2" style={{ flex: 1, position: 'relative' }}>
        <div className="crm-mock-wrapper" data-screen-idx={screen} style={{ width: '100%', maxWidth: 1000, position: 'absolute', right: 0, top: '50%', transform: 'translateY(-50%)', zIndex: 1 }}>
          <DesktopMock>
            <div key={screen} className="animate-fade-in" style={{ width: '100%', height: '100%' }}>
              {screenData[screen].el}
            </div>
          </DesktopMock>
        </div>
      </div>
      <SlideFooter num={num} label={footerLabel} />
    </div>
  );
};

const VideoIntro = () => {
  const [fading, setFading] = React.useState(false);
  const [hidden, setHidden] = React.useState(false);
  const handleEnded = () => {
    setFading(true);
    setTimeout(() => setHidden(true), 800);
  };
  if (hidden) return null;
  return (
    <div className={`video-intro ${fading ? 'fade-out' : ''}`}>
      <video 
        src="assets/logo-reveal.mp4" 
        autoPlay muted playsInline 
        onEnded={handleEnded}
        className="video-intro__media"
      />
    </div>
  );
};

// ---- MAIN APP ----
const ProposalApp = () => {
  const [current, setCurrent] = React.useState(0);
  const [mobileStep, setMobileStep] = React.useState(0);
  const [isMobile, setIsMobile] = React.useState(window.innerWidth <= 768);
  const totalSlides = 10;
  
  React.useEffect(() => {
    const handleResize = () => setIsMobile(window.innerWidth <= 768);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  const next = () => {
    if (isMobile && mobileStep === 0) {
      setMobileStep(1);
    } else if (current < totalSlides - 1) {
      setCurrent(current + 1);
      setMobileStep(0);
    }
  };

  const prev = () => {
    if (isMobile && mobileStep === 1) {
      setMobileStep(0);
    } else if (current > 0) {
      setCurrent(current - 1);
      setMobileStep(isMobile ? 1 : 0);
    }
  };

  const go = (n) => {
    setCurrent(Math.max(0, Math.min(totalSlides - 1, n)));
    setMobileStep(0);
  };

  React.useEffect(() => {
    const onKey = (e) => {
      if (e.key === 'ArrowRight' || e.key === 'ArrowDown') { e.preventDefault(); next(); }
      if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') { e.preventDefault(); prev(); }
    };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [current, isMobile, mobileStep]);

  React.useEffect(() => {
    const deck = document.querySelector('.deck');
    if (!deck) return;
    deck.querySelectorAll('.slide-wrap').forEach((w, i) => {
      if (i === current) {
        w.querySelectorAll('.enter').forEach(el => { el.classList.remove('on'); });
        requestAnimationFrame(() => requestAnimationFrame(() => {
          w.querySelectorAll('.enter').forEach(el => el.classList.add('on'));
        }));
      }
    });
  }, [current, mobileStep]);

  const Wrap = ({ idx, children }) => (
    <div className={`slide-wrap ${idx === current ? ('active ' + (mobileStep === 0 ? 'step-text' : 'step-image')) : ''}`} 
      style={{ 
        position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', 
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        opacity: idx === current ? 1 : 0, 
        pointerEvents: idx === current ? 'auto' : 'none',
        zIndex: idx === current ? 10 : 1,
        transition: 'opacity 0.6s ease'
      }}>
      {children}
    </div>
  );

  return (
    <React.Fragment>
      <VideoIntro />
      <div className="deck">
        {/* 0 - Cover */}
        <Wrap idx={0}>
          <div className="slide">
            <div className="slide__left" style={{ flex: '0 0 45%', paddingRight: 40 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 56 }}>
                <img src="assets/logo.png" style={{ height: 96 }} className="enter e-fade" />
              </div>
              <div className="deck-overline enter e-up d1">CRM Proposal · April 2026</div>
              <h1 className="deck-h1 enter e-up d2" style={{ maxWidth: 900, marginBottom: 16 }}>Member-Experience<br/>Platform</h1>
              <p className="deck-body enter e-up d3" style={{ maxWidth: 700 }}>
                A purpose-built CRM and member portal that transforms how your team manages cases, supports recovery, and measures real outcomes.
              </p>
              <div className="stat-row enter e-up d4" style={{ maxWidth: 650 }}>
                <div className="stat-box"><div className="stat-box__value">19</div><div className="stat-box__label">CRM screens</div></div>
                <div className="stat-box"><div className="stat-box__value">8</div><div className="stat-box__label">Portal screens</div></div>
                <div className="stat-box"><div className="stat-box__value">1</div><div className="stat-box__label">Unified platform</div></div>
              </div>
            </div>
            <div className="slide__right enter e-scale d2" style={{ flex: 1, position: 'relative' }}>
              <div style={{ position: 'absolute', right: 0, top: '50%', transform: 'translateY(-50%)', zIndex: 1, width: '100%', maxWidth: 1000 }}>
                <DesktopMock>
                  <CRMFrame active="today" crumbs={["Today"]}><TodayScreen /></CRMFrame>
                </DesktopMock>
              </div>
              <div style={{ position: 'absolute', right: -60, top: '50%', transform: 'translateY(-30%)', zIndex: 2 }}>
                <PhoneMock lg>
                  <PortalHome />
                </PhoneMock>
              </div>
            </div>
            <div style={{ position: 'absolute', right: 64, bottom: 56, display: 'flex', alignItems: 'center', gap: 10, fontSize: 12, color: '#8A929B', zIndex: 10 }} className="enter e-fade d5">
              <span>Staff CRM + Member Portal</span><span style={{ width: 4, height: 4, borderRadius: '50%', background: '#C8CFD4' }} /><span>Phase 1: CJS + IO</span>
            </div>
            <SlideFooter num="00" label="COVER" />
          </div>
        </Wrap>

        {/* 1 - Challenge */}
        <Wrap idx={1}>
      <div className="slide slide--dark slide--1">
        <div className="slide__left" style={{ flex: '0 0 45%', paddingRight: 40, position: 'relative', zIndex: 10 }}>
          <div className="deck-overline enter e-up">The Challenge</div>
          <h2 className="deck-h2 enter e-up d1" style={{ marginBottom: 16 }}>Your team deserves better tools.</h2>
          <p className="deck-body enter e-up d2" style={{ marginBottom: 32 }}>
            Disconnected systems, manual tracking, and scattered records — your caseworkers
            spend more time on admin than on the people they serve.
          </p>
          <div className="slide-1-cards" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {[
              ['red', 'Scattered records', 'Data across Salesforce, spreadsheets, email, and paper'],
              ['amber', 'No live risk picture', 'RAG status updated manually — weeks behind reality'],
              ['purple', 'Manual comms', 'Every reminder and follow-up sent by hand'],
              ['', 'No member voice', 'People you support have no self-service or visibility'],
            ].map(([tone, t, d], i) => (
              <div key={i} className={`callout callout--${tone || 'purple'} enter e-up d${i+2}`} style={{ padding: '20px 24px' }}>
                <div className="callout__title" style={{ fontSize: 18 }}>{t}</div>
                <div className="callout__body" style={{ fontSize: 15 }}>{d}</div>
              </div>
            ))}
          </div>
        </div>
        <div className="slide__right enter e-fade d3" style={{ flex: 1, position: 'relative' }}>
          <div style={{ position: 'absolute', right: 0, top: '40%', transform: 'translateY(-50%)', zIndex: 2, width: '100%', maxWidth: 900 }}>
            <DesktopMock>
              <CRMFrame active="cases" crumbs={["Cases", "Sarah Okafor"]}><CaseHeader tab="triage" /><TriageDashboard /></CRMFrame>
            </DesktopMock>
          </div>
          <div style={{ position: 'absolute', right: -120, top: '65%', transform: 'translateY(-50%)', zIndex: 1, width: '100%', maxWidth: 900, opacity: 0.6 }}>
            <DesktopMock>
              <CRMFrame active="reports" crumbs={["Reports"]}><ReportsScreen /></CRMFrame>
            </DesktopMock>
          </div>
        </div>
        <SlideFooter num="01" label="THE CHALLENGE" />
      </div>
        </Wrap>

        {/* 2 - Transformation */}
        <Wrap idx={2}>
      <div className="slide slide--purple">
        <div className="slide__left" style={{ flex: '0 0 45%', paddingRight: 40, zIndex: 10, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <div className="deck-overline enter e-up">The Transformation</div>
          <h2 className="deck-h2 enter e-up d1" style={{ marginBottom: 16 }}>
            From fragmented to focused.<br/>From reactive to proactive.
          </h2>
          <p className="deck-body enter e-up d2" style={{ marginBottom: 40 }}>
            One platform, one record per person, live risk dashboards, automated workflows,
            and a member portal that gives people ownership of their journey.
          </p>
          <div className="stat-row enter e-up d3" style={{ width: '100%' }}>
            <div className="stat-box"><div className="stat-box__value">80%</div><div className="stat-box__label">Less admin time</div></div>
            <div className="stat-box"><div className="stat-box__value">100%</div><div className="stat-box__label">Live risk visibility</div></div>
            <div className="stat-box"><div className="stat-box__value">24/7</div><div className="stat-box__label">Member self-service</div></div>
          </div>
        </div>
        <div className="slide__right enter e-scale d2" style={{ flex: 1, position: 'relative' }}>
          <div style={{ position: 'absolute', right: 0, top: '50%', transform: 'translateY(-50%)', zIndex: 1, width: '100%', maxWidth: 1000 }}>
            <DesktopMock>
              <CRMFrame active="people" crumbs={["People"]}><PeopleScreen /></CRMFrame>
            </DesktopMock>
          </div>
          <div style={{ position: 'absolute', right: -60, top: '50%', transform: 'translateY(-30%)', zIndex: 2 }}>
            <PhoneMock lg>
              <PortalJourney />
            </PhoneMock>
          </div>
        </div>
        <SlideFooter num="02" label="TRANSFORMATION" />
      </div>
        </Wrap>

        {/* 3 - CRM Dashboard */}
        <Wrap idx={3}>
          <CRMSlide num="03" footerLabel="STAFF CRM · DASHBOARD" title="Dashboard &amp;<br/>Triage"
            callouts={[['','Live risk picture','7 RAG domains update as circumstances change — never a one-off form.'],['callout--purple','Smart prioritisation','Cases sorted by urgency. Overdue actions surface automatically.']]}
            screenData={[
              { label: 'Today', el: <CRMFrame active="today" crumbs={["Today"]}><TodayScreen /></CRMFrame> },
              { label: 'Triage', el: <CRMFrame active="cases" crumbs={["Cases","Sarah Okafor"]}><CaseHeader tab="triage" /><TriageDashboard /></CRMFrame> },
              { label: 'Overview', el: <CRMFrame active="cases" crumbs={["Cases","Sarah Okafor"]}><OverviewTab /></CRMFrame> },
            ]} />
        </Wrap>

        {/* 4 - Case Management */}
        <Wrap idx={4}>
          <CRMSlide num="04" footerLabel="STAFF CRM · CASE MANAGEMENT" title="Case<br/>Management"
            callouts={[['callout--purple','Evidence builder','Track mitigation documents with progress bars and automated chasing.'],['','DSAR workflow','Issue, track, and reuse operator data requests — all in one pipeline.']]}
            screenData={[
              { label: 'Legal', el: <CRMFrame active="cases" crumbs={["Cases","Sarah Okafor"]}><LegalScreen /></CRMFrame> },
              { label: 'DSAR', el: <CRMFrame active="cases" crumbs={["Cases","Sarah Okafor"]}><DSARScreen /></CRMFrame> },
              { label: 'Documents', el: <CRMFrame active="cases" crumbs={["Cases","Sarah Okafor"]}><DocsTab /></CRMFrame> },
              { label: 'Notes', el: <CRMFrame active="cases" crumbs={["Cases","Sarah Okafor"]}><NotesTab /></CRMFrame> },
              { label: 'Comms', el: <CRMFrame active="cases" crumbs={["Cases","Sarah Okafor"]}><CommsTab /></CRMFrame> },
              { label: 'Timeline', el: <CRMFrame active="cases" crumbs={["Cases","Sarah Okafor"]}><TimelineTab /></CRMFrame> },
            ]} />
        </Wrap>

        {/* 5 - Operations */}
        <Wrap idx={5}>
          <CRMSlide num="05" footerLabel="STAFF CRM · OPERATIONS" title="Referrals,<br/>People &amp; Ops"
            callouts={[['','Guided intake','5-step referral form with smart routing, consent capture, and auto-acknowledgement.'],['callout--purple','Funder-ready reports','Live dashboards and exportable outcomes — engagement, stage distribution, and trends.']]}
            screenData={[
              { label: 'Referrals', el: <CRMFrame active="referrals" crumbs={["Referrals"]}><ReferralsScreen /></CRMFrame> },
              { label: 'Intake', el: <CRMFrame active="referrals" crumbs={["Referrals","New"]}><IntakeScreen /></CRMFrame> },
              { label: 'People', el: <CRMFrame active="people" crumbs={["People"]}><PeopleScreen /></CRMFrame> },
              { label: 'Groups', el: <CRMFrame active="groups" crumbs={["Groups"]}><GroupsScreen /></CRMFrame> },
              { label: 'Reports', el: <CRMFrame active="reports" crumbs={["Reports"]}><ReportsScreen /></CRMFrame> },
              { label: 'Settings', el: <CRMFrame active="" crumbs={["Settings","Roles"]}><SettingsScreen /></CRMFrame> },
            ]} />
        </Wrap>

        {/* 6 - Portal Sign in + Home */}
        <Wrap idx={6}>
          <div className="slide">
            <div className="slide__left">
              <div className="deck-overline enter e-up">Member Portal</div>
              <h2 className="deck-h2 enter e-up d1">Sign in &<br/>Home screen</h2>
              <div className="enter e-up d2">
                <div className="callout"><div className="callout__title">Safe authentication</div><div className="callout__body">Email + password or magic link. Quick exit button is the first thing visible. Idle timeout of 15 min.</div></div>
                <div className="callout callout--purple"><div className="callout__title">Warm welcome</div><div className="callout__body">First name only. Current stage front-and-centre. Next appointment highlighted. Actions surfaced immediately.</div></div>
              </div>
            </div>
            <div className="slide__right enter e-scale d3" style={{ gap: 16 }}>
              <PhoneMock lg><PortalLogin /></PhoneMock>
              <PhoneMock lg><PortalHome /></PhoneMock>
            </div>
            <SlideFooter num="06" label="MEMBER PORTAL · SIGN IN · HOME" />
          </div>
        </Wrap>

        {/* 7 - Portal Journey + Docs */}
        <Wrap idx={7}>
          <div className="slide slide--7">
            <div className="slide__right enter e-scale" style={{ gap: 16, order: -1 }}>
              <PhoneMock lg><PortalJourney /></PhoneMock>
              <PhoneMock lg><PortalDocs /></PhoneMock>
            </div>
            <div className="slide__left" style={{ order: 1, paddingLeft: 40, paddingRight: 0 }}>
              <div className="deck-overline enter e-up d1">Member Portal</div>
              <h2 className="deck-h2 enter e-up d2">Journey &<br/>Documents</h2>
              <div className="enter e-up d3">
                <div className="callout"><div className="callout__title">Member-controlled stage</div><div className="callout__body">The member can update their own CJS stage and date when something changes — reducing lag between reality and the record.</div></div>
                <div className="callout callout--purple"><div className="callout__title">Permission-gated docs</div><div className="callout__body">Members see only their own uploads plus files a worker has explicitly shared. Internal documents are never visible.</div></div>
              </div>
            </div>
            <SlideFooter num="07" label="MEMBER PORTAL · JOURNEY · DOCUMENTS" />
          </div>
        </Wrap>

        {/* 8 - Portal Support + Messages */}
        <Wrap idx={8}>
          <div className="slide">
            <div className="slide__left" style={{ flex: '0 0 32%' }}>
              <h2 className="deck-h2 enter e-up">Support &<br/>Messages</h2>
              <div className="enter e-up d1">
                <div className="callout"><div className="callout__title">Self-assessment in-app</div><div className="callout__body">Secure form accessible any time — answers feed directly into the CRM triage dashboard. Optional but encouraged.</div></div>
                <div className="callout callout--purple"><div className="callout__title">Worker-to-member thread</div><div className="callout__body">Operational messages (reminders, nudges, check-ins) in a clean thread. No marketing. No noise.</div></div>
              </div>
            </div>
            <div className="slide__right enter e-scale d2" style={{ gap: 16 }}>
              <PhoneMock lg><PortalSupport /></PhoneMock>
              <PhoneMock lg><PortalMessages /></PhoneMock>
            </div>
            <SlideFooter num="08" label="MEMBER PORTAL · SUPPORT · MESSAGES" />
          </div>
        </Wrap>

        {/* 9 - CTA */}
        <Wrap idx={9}>
          <div className="slide slide--9">
            <div className="slide__left" style={{ flex: '0 0 50%', paddingRight: 60, position: 'relative', zIndex: 10, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
              <img src="assets/logo.png" style={{ height: 96, marginBottom: 40, alignSelf: 'flex-start' }} className="enter e-fade" />
              <div className="deck-overline enter e-up d1">Next Steps</div>
              <h2 className="deck-h2 enter e-up d2" style={{ marginBottom: 16 }}>Ready to transform your member experience?</h2>
              <p className="deck-body enter e-up d3" style={{ marginBottom: 40 }}>
                Every screen you've seen is designed and ready to build. The design system is locked. The architecture is proven. Let's make it real.
              </p>
              <div className="feature-grid enter e-up d4" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                {[
                  ['shield', 'Consent & safeguarding', 'Configurable thresholds, auto-alerts to DSL'],
                  ['graph', 'Funder-ready reporting', 'Live dashboards, CSV exports, outcome tracking'],
                  ['target', 'Evidence automation', 'DSAR pipelines, mitigation builders, versioning'],
                  ['heart', 'Member empowerment', 'Self-service portal with quick exit on every screen']
                ].map(([icon, t, d], i) => (
                  <div key={i} className="feature-card" style={{ padding: 24, background: '#fff', borderRadius: 12, border: '1px solid #E1E5E8' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 12 }}>
                      <div className="feature-card__icon" style={{ width: 40, height: 40, borderRadius: 8, background: '#F5F0FA', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: 0 }}>
                        <Icon name={icon} size={20} color="#4B0082" />
                      </div>
                      <div className="feature-card__title" style={{ fontSize: 18, color: '#1A1A1A', fontWeight: 700, margin: 0, lineHeight: 1.2 }}>{t}</div>
                    </div>
                    <div className="feature-card__desc" style={{ fontSize: 15, color: '#5A6670', lineHeight: 1.4 }}>{d}</div>
                  </div>
                ))}
              </div>
            </div>
            <div className="slide__right enter e-scale d3" style={{ flex: 1, position: 'relative' }}>
               <div style={{ position: 'absolute', right: 80, top: '40%', transform: 'translateY(-50%) rotate(-3deg)', zIndex: 1, width: '100%', maxWidth: 900, opacity: 0.6 }}>
                 <DesktopMock>
                   <CRMFrame active="today" crumbs={["Today"]}><TodayScreen /></CRMFrame>
                 </DesktopMock>
               </div>
               <div style={{ position: 'absolute', right: 0, top: '55%', transform: 'translateY(-50%) rotate(2deg)', zIndex: 2, width: '100%', maxWidth: 900 }}>
                 <DesktopMock>
                   <CRMFrame active="people" crumbs={["People"]}><PeopleScreen /></CRMFrame>
                 </DesktopMock>
               </div>
               <div style={{ position: 'absolute', right: -60, top: '70%', transform: 'translateY(-30%) rotate(6deg)', zIndex: 3 }}>
                 <PhoneMock lg>
                   <PortalHome />
                 </PhoneMock>
               </div>
            </div>
            <SlideFooter num="09" label="NEXT STEPS" />
          </div>
        </Wrap>
      </div>

      <div className="deck-nav">
        <button className="deck-nav__btn" disabled={current === 0 && (!isMobile || mobileStep === 0)} onClick={prev}>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M9 3L5 7l4 4"/></svg>
        </button>
        <div className="deck-nav__dots">
          {Array.from({ length: totalSlides }, (_, i) => (
            <button key={i} className={`deck-nav__dot ${i === current ? 'deck-nav__dot--active' : ''}`} onClick={() => go(i)} />
          ))}
        </div>
        <button className="deck-nav__btn" disabled={current === totalSlides - 1 && (!isMobile || mobileStep === 1)} onClick={next}>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M5 3l4 4-4 4"/></svg>
        </button>
      </div>
    </React.Fragment>
  );
};

Object.assign(window, { ProposalApp });