{PRIDE3.map((c, i) =>

)}

); } function Logo3() { return (

); } function Btn3({ label, accent = C3.violet, onClick, outline = false, href, small = false, disabled = false }) { const style = { fontFamily: SANS3, fontSize: small ? 11 : 13, fontWeight: 800, background: disabled ? '#ccc' : (outline ? 'transparent' : accent), color: outline ? accent : '#fff', border: `2px solid ${disabled ? '#ccc' : accent}`, borderRadius: 28, padding: small ? '8px 20px' : '11px 26px', cursor: disabled ? 'not-allowed' : 'pointer', letterSpacing: '0.02em', display: 'inline-block', textDecoration: 'none', opacity: disabled ? 0.7 : 1, }; if (href) return {label}; return ; } function Field3({ label, type = 'text', placeholder, required, name }) { const inputStyle = { width: '100%', fontFamily: SANS3, fontSize: 13, color: C3.ink, background: C3.sand, border: `1.5px solid ${C3.mid}20`, borderRadius: 10, padding: '10px 14px', outline: 'none', boxSizing: 'border-box', }; return (

{label}{required && ' *'} {type === 'textarea' ?

: <input type={type} name={name} placeholder={placeholder} required={required}
            style={inputStyle} />
      }
    </div>
  );
}

function CheckGroup3({ label, name, options, accent }) {
  return (
    <div style={{ marginBottom: 16 }}>
      <label style={{ fontFamily: SANS3, fontSize: 11, fontWeight: 700, color: C3.mid, letterSpacing: '0.08em', textTransform: 'uppercase', display: 'block', marginBottom: 8 }}>{label}</label>
      {options.map(opt => (
        <label key={opt} style={{ display: 'flex', alignItems: 'center', gap: 8, fontFamily: SANS3, fontSize: 13, color: C3.ink, marginBottom: 7, cursor: 'pointer' }}>
          <input type="checkbox" name={name} value={opt} style={{ accentColor: accent, width: 15, height: 15 }} /> {opt}
        </label>
      ))}
    </div>
  );
}

function RadioGroup3({ label, options, name, accent }) {
  return (
    <div style={{ marginBottom: 16 }}>
      <label style={{ fontFamily: SANS3, fontSize: 11, fontWeight: 700, color: C3.mid, letterSpacing: '0.08em', textTransform: 'uppercase', display: 'block', marginBottom: 8 }}>{label}</label>
      {options.map(opt => (
        <label key={opt} style={{ display: 'flex', alignItems: 'center', gap: 8, fontFamily: SANS3, fontSize: 13, color: C3.ink, marginBottom: 7, cursor: 'pointer' }}>
          <input type="radio" name={name} value={opt} style={{ accentColor: accent, width: 15, height: 15 }} /> {opt}
        </label>
      ))}
    </div>
  );
}

/* ── Modal shell ── */
function Modal3({ open, onClose, title, children, accent = C3.violet }) {
  const { useEffect } = React;
  useEffect(() => {
    const h = e => { if (e.key === 'Escape') onClose(); };
    if (open) document.addEventListener('keydown', h);
    return () => document.removeEventListener('keydown', h);
  }, [open, onClose]);
  if (!open) return null;
  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(26,23,48,0.65)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
      <div onClick={e => e.stopPropagation()} style={{ background: '#fff', width: '100%', maxWidth: 540, maxHeight: '90vh', overflowY: 'auto', borderRadius: 20, position: 'relative' }}>
        <div style={{ height: 5, background: `linear-gradient(90deg, ${accent}, ${C3.teal})` }} />
        <div style={{ padding: '32px 36px 36px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 22 }}>
            <h2 style={{ fontFamily: SERIF3, fontSize: 28, fontWeight: 600, color: C3.ink, lineHeight: 1.2, maxWidth: 380 }}>{title}</h2>
            <button onClick={onClose} style={{ background: `${C3.mid}15`, border: 'none', cursor: 'pointer', fontSize: 18, color: C3.mid, padding: '5px 10px', borderRadius: '50%', flexShrink: 0, marginLeft: 16 }}>×</button>
          </div>
          {children}
        </div>
      </div>
    </div>
  );
}

/* ── Contact / Work With Us modal → xeepbvva ── */
function ContactModal3({ open, onClose }) {
  const [status, setStatus] = React.useState('idle');
  const handleClose = () => { setStatus('idle'); onClose(); };
  const handleSubmit = e => { e.preventDefault(); submitToFormspree('xeepbvva', e.target, setStatus); };
  return (
    <Modal3 open={open} onClose={handleClose} title="Work With Us" accent={C3.violet}>
      <p style={{ fontFamily: SANS3, fontSize: 13, color: C3.mid, lineHeight: 1.7, marginBottom: 22 }}>
        We welcome partnership inquiries, collaboration requests, and questions from community members, legal professionals, and researchers. Every message is read by Dr. Nasiri personally.
      </p>
      {status === 'ok'
        ? <FormMsg status="ok" />
        : (
          <form onSubmit={handleSubmit}>
            <input type="hidden" name="_subject" value="General Enquiry — CFJR" />
            <input type="text" name="_gotcha" style={{ display: 'none' }} />
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0 16px' }}>
              <Field3 name="first_name" label="First Name" placeholder="Jane" required />
              <Field3 name="last_name"  label="Last Name"  placeholder="Smith" required />
            </div>
            <Field3 name="email" type="email" label="Email" placeholder="jane@example.com" required />
            <Field3 name="organisation" label="Organisation" placeholder="Optional" />
            <Select3 name="enquiry_type" label="Type of Enquiry" required options={[
              'Research partnership','Policy brief support','Expert consultation',
              'Speaking & media','Academic collaboration','Community consultation','Other',
            ]} />
            <Select3 name="research_interest" label="Research Project Interest (optional)" options={ALL_PROJECTS} />
            <Field3 name="message" type="textarea" label="Message" placeholder="How can we help?" required />
            <Btn3 label={status === 'sending' ? 'Sending…' : 'Send Message ✦'} accent={C3.violet} disabled={status === 'sending'} />
            <FormMsg status={status} />
          </form>
        )
      }
    </Modal3>
  );
}

/* ── Newsletter modal → xeepbvva ── */
function NewsletterModal3({ open, onClose }) {
  const [status, setStatus] = React.useState('idle');
  const handleClose = () => { setStatus('idle'); onClose(); };
  const handleSubmit = e => { e.preventDefault(); submitToFormspree('xeepbvva', e.target, setStatus); };
  return (
    <Modal3 open={open} onClose={handleClose} title="Stay Connected" accent={C3.teal}>
      <p style={{ fontFamily: SANS3, fontSize: 13, color: C3.mid, lineHeight: 1.7, marginBottom: 22 }}>
        Sign up to receive research updates, new publications, and event announcements from CFJR.
      </p>
      {status === 'ok'
        ? <FormMsg status="ok" />
        : (
          <form onSubmit={handleSubmit}>
            <input type="hidden" name="_subject" value="Newsletter Signup — CFJR" />
            <input type="text" name="_gotcha" style={{ display: 'none' }} />
            <Field3 name="name"  label="Full Name" placeholder="Your name"     required />
            <Field3 name="email" type="email" label="Email" placeholder="your@email.com" required />
            <CheckGroup3 name="role" label="I am a…" accent={C3.teal} options={[
              'Legal professional','Community member','Researcher / Academic',
              'Policy maker','Member of the media','Other',
            ]} />
            <Select3 name="research_interest" label="Research Area of Interest (optional)" options={ALL_PROJECTS} />
            <Btn3 label={status === 'sending' ? 'Sending…' : 'Subscribe ✦'} accent={C3.teal} disabled={status === 'sending'} />
            <FormMsg status={status} />
          </form>
        )
      }
    </Modal3>
  );
}

/* ── Media inquiry modal → xeepbvva (CC to DrNasiri) ── */
function MediaModal3({ open, onClose }) {
  const [status, setStatus] = React.useState('idle');
  const handleClose = () => { setStatus('idle'); onClose(); };
  const handleSubmit = e => { e.preventDefault(); submitToFormspree('xeepbvva', e.target, setStatus); };
  return (
    <Modal3 open={open} onClose={handleClose} title="Media Inquiry" accent={C3.rose}>
      <p style={{ fontFamily: SANS3, fontSize: 13, color: C3.mid, lineHeight: 1.7, marginBottom: 22 }}>
        For press, interviews, or expert commentary. Media enquiries are directed to Dr. Nasiri personally. We respond within two business days.
      </p>
      {status === 'ok'
        ? <FormMsg status="ok" />
        : (
          <form onSubmit={handleSubmit}>
            <input type="hidden" name="_subject" value="Media Inquiry — CFJR" />
            <input type="hidden" name="_cc"      value="DrNasiri@familyjusticeresearch.org" />
            <input type="text"   name="_gotcha"  style={{ display: 'none' }} />
            <Field3 name="name"         label="Full Name"            placeholder="Reporter name"         required />
            <Field3 name="email"        type="email" label="Email"   placeholder="press@outlet.com"      required />
            <Field3 name="organisation" label="Outlet / Organisation" placeholder="Publication or broadcaster" required />
            <Select3 name="research_area" label="Research Area" options={ALL_PROJECTS} />
            <Field3 name="deadline" type="date" label="Deadline" />
            <Field3 name="message" type="textarea" label="Your Inquiry" placeholder="Please describe your request…" required />
            <Btn3 label={status === 'sending' ? 'Sending…' : 'Send Inquiry ✦'} accent={C3.rose} disabled={status === 'sending'} />
            <FormMsg status={status} />
          </form>
        )
      }
    </Modal3>
  );
}

/* ── Recruitment modal → xwvaejbp ── */
function RecruitModal3({ open, onClose, project }) {
  const [status, setStatus] = React.useState('idle');
  const handleClose = () => { setStatus('idle'); onClose(); };
  const handleSubmit = e => { e.preventDefault(); submitToFormspree('xwvaejbp', e.target, setStatus); };
  const accent = project === 'chosen' ? C3.teal : (project === 'beyond-harm' ? C3.rose : C3.violet);
  const defaultProject = project === 'chosen' ? 'chosen' : (project === 'beyond-harm' ? 'beyond-harm' : '');
  return (
    <Modal3 open={open} onClose={handleClose} title="Express Interest in Participating" accent={accent}>
      <p style={{ fontFamily: SANS3, fontSize: 13, color: C3.mid, lineHeight: 1.7, marginBottom: 14 }}>
        CFJR's active research projects are community-engaged and rely on the participation of 2SLGBTQIA+ Canadians and allied professionals. Participation is voluntary and fully confidential.
      </p>
      <div style={{ background: `${accent}12`, borderRadius: 12, padding: '14px 16px', marginBottom: 20, borderLeft: `3px solid ${accent}` }}>
        <p style={{ fontFamily: SANS3, fontSize: 12, color: C3.mid, lineHeight: 1.6, margin: 0 }}>
          Both active studies have received ethics approval in accordance with TCPS-2. You may withdraw at any time without consequence.
        </p>
      </div>
      {status === 'ok'
        ? <FormMsg status="ok" />
        : (
          <form onSubmit={handleSubmit}>
            <input type="hidden" name="_subject" value="Research Participation Interest — CFJR" />
            <input type="text"   name="_gotcha"  style={{ display: 'none' }} />
            <Select3
              name="project" label="Research Project" required
              options={ACTIVE_PROJECTS} defaultValue={defaultProject}
            />
            <Field3 name="name"  label="Full Name (or preferred name)" placeholder="How you'd like to be addressed" required />
            <Field3 name="email" type="email" label="Email" placeholder="your@email.com" required />
            <Select3 name="province" label="Province / Territory" options={PROVINCES} />
            <RadioGroup3 name="participant_type" label="I am a…" accent={accent} options={[
              'Community member / 2SLGBTQIA+ individual',
              'Legal practitioner (lawyer, notary, social worker)',
              'Therapist or counsellor',
              'Researcher / Academic',
              'Other',
            ]} />
            <Field3 name="notes" type="textarea" label="Anything you'd like us to know?" placeholder="Optional — access needs, questions, or context" />
            <div style={{ marginBottom: 20 }}>
              <label style={{ display: 'flex', alignItems: 'flex-start', gap: 8, fontFamily: SANS3, fontSize: 12, color: C3.mid, cursor: 'pointer', lineHeight: 1.55 }}>
                <input type="checkbox" name="consent" required style={{ accentColor: accent, width: 14, height: 14, flexShrink: 0, marginTop: 2 }} />
                I understand that participation is voluntary and fully confidential, and that my contact information will only be used to follow up about this study.
              </label>
            </div>
            <Btn3 label={status === 'sending' ? 'Sending…' : 'Express Interest ✦'} accent={accent} disabled={status === 'sending'} />
            <FormMsg status={status} />
          </form>
        )
      }
    </Modal3>
  );
}

/* ── Site Nav ── */
function SiteNav({ onContact, onParticipate, activePage = '' }) {
  const { useState, useEffect, useRef } = React;
  const [resOpen, setResOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const dropRef = useRef(null);

useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 10);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

useEffect(() => {
    const h = e => { if (dropRef.current && !dropRef.current.contains(e.target)) setResOpen(false); };
    document.addEventListener('mousedown', h);
    return () => document.removeEventListener('mousedown', h);
  }, []);

const navLinks = [
    { label: 'About',          href: '/about/' },
    { label: 'Queer Families', href: '/queer-families/' },
    { label: 'Resources',      href: '/resources/' },
  ];

return (
    <nav style={{ position: 'sticky', top: 0, zIndex: 100, background: 'rgba(255,255,255,0.97)', backdropFilter: 'blur(12px)', boxShadow: scrolled ? '0 2px 24px rgba(26,23,48,0.10)' : '0 1px 0 #E5E0F4', transition: 'box-shadow 0.2s' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 48px', maxWidth: 1280, margin: '0 auto' }}>
        <Logo3 />
        <div style={{ display: 'flex', alignItems: 'center', gap: 2 }}>
          {navLinks.slice(0, 2).map(l => (
            <a key={l.label} href={l.href} style={linkStyle(isActive(l.label))}
              onMouseEnter={e => { if (!isActive(l.label)) { e.currentTarget.style.background = `${C3.teal}12`; e.currentTarget.style.color = C3.teal; } }}
              onMouseLeave={e => { if (!isActive(l.label)) { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = C3.mid; } }}>
              {l.label}
            </a>
          ))}

{/* Research dropdown */}
          <div ref={dropRef} style={{ position: 'relative' }}>
            <button onClick={() => setResOpen(v => !v)}
              style={{ ...textBtnBase, color: isActive('research') ? C3.violet : (resOpen ? C3.violet : C3.mid), background: (isActive('research') || resOpen) ? `${C3.violet}12` : 'transparent', display: 'flex', alignItems: 'center', gap: 4 }}>
              Research <span style={{ fontSize: 9, transform: resOpen ? 'rotate(180deg)' : 'none', display: 'inline-block', transition: 'transform 0.15s' }}>▼</span>
            </button>
            {resOpen && (
              <div style={{ position: 'absolute', top: 'calc(100% + 8px)', left: 0, background: '#fff', minWidth: 300, zIndex: 200, borderRadius: 16, boxShadow: '0 8px 40px rgba(26,23,48,0.15)', overflow: 'hidden', border: `1px solid ${C3.violet}20` }}>
                <PrideStripe3 height={4} />
                <a href="/research/" onClick={() => setResOpen(false)}
                  style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 18px 10px', fontFamily: SANS3, fontSize: 12, fontWeight: 800, color: C3.violet, borderBottom: `1px solid ${C3.ink}10`, textDecoration: 'none', letterSpacing: '0.06em', textTransform: 'uppercase' }}>
                  All Research →
                </a>
                {RESEARCH_DATA.map(r => (
                  <a key={r.id} href={r.href} onClick={() => setResOpen(false)}
                    style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '11px 18px', fontFamily: SANS3, fontSize: 13, color: C3.ink, borderBottom: `1px solid ${C3.ink}08`, textDecoration: 'none', transition: 'background 0.12s' }}
                    onMouseEnter={e => e.currentTarget.style.background = `${r.color}10`}
                    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                    <span style={{ width: 9, height: 9, borderRadius: '50%', background: r.color, flexShrink: 0 }} />
                    <span style={{ fontWeight: 600, flex: 1 }}>{r.full}</span>
                    {r.status === 'Active' && <span style={{ fontSize: 9, fontWeight: 800, color: r.color, background: `${r.color}18`, borderRadius: 10, padding: '2px 8px' }}>Active</span>}
                  </a>
                ))}
              </div>
            )}
          </div>

{navLinks.slice(2).map(l => (
            <a key={l.label} href={l.href} style={linkStyle(isActive(l.label))}
              onMouseEnter={e => { if (!isActive(l.label)) { e.currentTarget.style.background = `${C3.teal}12`; e.currentTarget.style.color = C3.teal; } }}
              onMouseLeave={e => { if (!isActive(l.label)) { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = C3.mid; } }}>
              {l.label}
            </a>
          ))}

<button onClick={onParticipate} style={textBtnBase}
            onMouseEnter={e => { e.currentTarget.style.background = `${C3.teal}12`; e.currentTarget.style.color = C3.teal; }}
            onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = C3.mid; }}>
            Participate
          </button>
        </div>

<button onClick={onContact}
          style={{ fontFamily: SANS3, fontSize: 12, fontWeight: 800, background: `linear-gradient(135deg, ${C3.teal}, ${C3.violet})`, color: '#fff', border: 'none', borderRadius: 24, padding: '10px 22px', cursor: 'pointer' }}>
          Work With Us
        </button>
      </div>
    </nav>
  );
}

/* ── Page Hero ── */
function PageHero({ tag, tagColor = C3.teal, title, titleAccent, accentColor = C3.violet, subtitle, circleColors = [C3.teal, C3.violet, C3.rose], bg = C3.sand }) {
  return (
    <section style={{ background: bg, position: 'relative', overflow: 'hidden', padding: '72px 48px 64px' }}>
      <svg style={{ position: 'absolute', right: -40, top: -40, pointerEvents: 'none', opacity: 0.55 }} width="440" height="440" viewBox="0 0 440 440" aria-hidden>
        <circle cx="280" cy="140" r="200" fill={circleColors[0]} opacity="0.07" />
        <circle cx="380" cy="320" r="120" fill={circleColors[1]} opacity="0.08" />
        <circle cx="140" cy="360" r="80"  fill={circleColors[2]} opacity="0.07" />
      </svg>
      <div style={{ maxWidth: 1280, margin: '0 auto', position: 'relative', zIndex: 1 }}>
        {tag && <div style={{ fontFamily: SANS3, fontSize: 11, fontWeight: 800, color: tagColor, letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 16 }}>{tag}</div>}
        <h1 style={{ fontFamily: SERIF3, fontSize: 56, fontWeight: 600, lineHeight: 1.1, color: C3.ink, marginBottom: 20, textWrap: 'pretty', maxWidth: 760 }}>
          {title}{titleAccent && <><br /><span style={{ color: accentColor, fontStyle: 'italic' }}>{titleAccent}</span></>}
        </h1>
        {subtitle && <p style={{ fontFamily: SANS3, fontSize: 16, color: C3.mid, lineHeight: 1.8, maxWidth: 600 }}>{subtitle}</p>}
        <div style={{ display: 'flex', gap: 6, marginTop: 28 }}>
          {circleColors.map((c, i) => <div key={i} style={{ flex: 1, maxWidth: 80, height: 3, borderRadius: 2, background: c }} />)}
        </div>
      </div>
    </section>
  );
}

/* ── Site Footer ── */
function SiteFooter({ setModal }) {
  const open = key => e => { e.preventDefault(); setModal(key); };
  return (
    <footer style={{ background: C3.sand, borderTop: `1.5px solid ${C3.ink}12` }}>
      <PrideStripe3 height={5} />
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '56px 48px 32px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 40, marginBottom: 48 }}>
          <div>
            <Logo3 />
            <p style={{ fontFamily: SANS3, fontSize: 12, color: C3.mid, lineHeight: 1.8, marginTop: 20, maxWidth: 260 }}>
              Advancing equity and justice for queer and polyamorous families through rigorous research and community engagement.
            </p>
          </div>
          {[
            {
              head: 'Research',
              links: [
                { l: 'All Research', h: '/research/' },
                ...RESEARCH_DATA.map(r => ({ l: r.slug, h: r.href })),
              ],
            },
            {
              head: 'Site',
              links: [
                { l: 'About',          h: '/about/' },
                { l: 'Queer Families', h: '/queer-families/' },
                { l: 'Resources',      h: '/resources/' },
              ],
            },
            {
              head: 'Connect',
              links: [
                { l: 'Newsletter',      h: '#', modal: 'newsletter' },
                { l: 'Media Inquiries', h: '#', modal: 'media' },
                { l: 'Work With Us',    h: '#', modal: 'contact' },
                { l: 'Participate',     h: '/research/chosen/' },
              ],
            },
          ].map(col => (
            <div key={col.head}>
              <div style={{ fontFamily: SANS3, fontSize: 10, fontWeight: 800, color: C3.gold, letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 16 }}>{col.head}</div>
              {col.links.map(({ l, h, modal }) => (
                <a key={l} href={h} onClick={modal ? open(modal) : undefined}
                  style={{ display: 'block', fontFamily: SANS3, fontSize: 12, color: C3.mid, marginBottom: 10, textDecoration: 'none', transition: 'color 0.15s', cursor: 'pointer' }}
                  onMouseEnter={e => e.currentTarget.style.color = C3.ink}
                  onMouseLeave={e => e.currentTarget.style.color = C3.mid}>
                  {l}
                </a>
              ))}
            </div>
          ))}
        </div>
        <div style={{ borderTop: `1px solid ${C3.ink}15`, paddingTop: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <p style={{ fontFamily: SANS3, fontSize: 11, color: `${C3.mid}99` }}>© 2026 Centre for Family Justice Research. All rights reserved.</p>
          <p style={{ fontFamily: SANS3, fontSize: 11, color: `${C3.mid}99` }}>Canada · 2SLGBTQIA+ Inclusive Research</p>
        </div>
      </div>
    </footer>
  );
}

/* ── Page wrapper with modal state ── */
function withModals(PageComponent) {
  return function WrappedPage(props) {
    const [modal, setModal] = React.useState(null);
    return (
      <>
        <PrideStripe3 height={5} />
        <SiteNav
          onContact={() => setModal('contact')}
          onParticipate={() => setModal('recruit')}
          activePage={props.activePage || ''}
        />
        <PageComponent {...props} setModal={setModal} />
        <SiteFooter setModal={setModal} />
        <ContactModal3    open={modal === 'contact'}             onClose={() => setModal(null)} />
        <NewsletterModal3 open={modal === 'newsletter'}          onClose={() => setModal(null)} />
        <MediaModal3      open={modal === 'media'}               onClose={() => setModal(null)} />
        <RecruitModal3    open={modal === 'recruit'}             onClose={() => setModal(null)} project={null} />
        <RecruitModal3    open={modal === 'recruit-chosen'}      onClose={() => setModal(null)} project="chosen" />
        <RecruitModal3    open={modal === 'recruit-beyond-harm'} onClose={() => setModal(null)} project="beyond-harm" />
      </>
    );
  };
}

Object.assign(window, {
  C3, SERIF3, SANS3, PRIDE3, RESEARCH_DATA,
  ACTIVE_PROJECTS, ALL_PROJECTS, PROVINCES,
  submitToFormspree, FormMsg,
  PrideStripe3, Logo3, Btn3, Field3, Select3, CheckGroup3, RadioGroup3,
  Modal3, ContactModal3, NewsletterModal3, MediaModal3, RecruitModal3,
  SiteNav, PageHero, SiteFooter, withModals,
});