// Communiqué — Careers page (Pitches, Vacancies, Internships)

const CareersPage = () => (
  <div className="app">
    <Nav onMember={() => {}}/>
    <TopRibbon/>
    <ThemeToggle/>
    <main>
      <div className="container">
        <div className="page-hero">
          <div className="eyebrow">Work With Us</div>
          <h1>Careers</h1>
          <p className="subtitle">Pitches, open roles, and internships.</p>
        </div>

        <div className="careers-section" id="pitches">
          <div className="num">01 — Pitches</div>
          <h2>Write for Us</h2>
          <p>If you would like to pitch us an article or essay, please send your pitch of no more than 150 words via email with your working title as the subject line.</p>
          <p>As we grow, we will endeavour to have a base rate article fee, but for the time being we are unable to remunerate works published on our site.</p>
          <p>If your pitch is for a possible longer-term project that aligns with our mission and programme, we may work together to find external funding for your research or investigation.</p>
          <Button variant="outline-brick" onClick={() => window.location.href='mailto:press@communique.media'}>Send a pitch →</Button>
        </div>

        <div className="careers-section" id="vacancies">
          <div className="num">02 — Vacancies</div>
          <h2>Open Roles</h2>
          <p>We don't accept unsolicited professional applications at this time, but if you'd like to support our work please consider becoming a regular donor or a volunteer.</p>
          <p>Open listings will be found here, and priority for paid positions will be for active members unless we are recruiting outside our specialisms.</p>
          <p style={{color:'var(--muted)', fontStyle:'italic'}}>No open listings at this time.</p>
        </div>

        <div className="careers-section" id="internships">
          <div className="num">03 — Internships</div>
          <h2>Internships</h2>
          <p>We are happy to receive applications for internships on a rolling basis; however, our capacity might not always allow us to take on interns.</p>
          <p>Belgian students enrolled in a study which requires placement or work experience will be given priority, but international internships are possible.</p>
          <Button variant="outline-brick" onClick={() => window.location.href='mailto:press@communique.media'}>Apply for an internship →</Button>
        </div>
      </div>
    </main>
    <Footer/>
  </div>
);

Object.assign(window, { CareersPage });