/* ============================================================
   The Carnation — Get Involved / Join
   An invitation to contributors, photographers, tipsters,
   correspondents, and civic ambassadors.
   ============================================================ */

function JoinPage() {
  useEffect(() => { window.scrollTo(0, 0); }, []);
  const ways = [
    { h: "Write for us", p: "Pitch an essay, a column, or a reported piece, and draft it right here. Good writing from people who live here, with a byline and real editing behind it.", cta: "Start a piece", href: "#/contribute/write" },
    { h: "Shoot the city", p: "Photograph Alliance: Main Street, the events, the small stuff. We're actively looking for photo and video contributors. Send a portfolio or a single great frame.", cta: "Send your work", href: "#/contribute/photo" },
    { h: "Tell your own story", p: "First-person accounts from the people who live a block, run a shop, or remember a place. The city's record is made of these.", cta: "Tell it here", href: "#/contribute/story" },
    { h: "Send tips & happenings", p: "A new opening, a closing, a meeting worth covering, something changing on your street. Help us stay current.", cta: "Send a tip", href: "#/contribute/tip" },
    { h: "Pitch coverage", p: "See a story we're missing? Bring us the lead, and if you'd like, a hand reporting it out.", cta: "Pitch coverage", href: "#/contribute/pitch" },
    { h: "Offer an interview", p: "Offer yourself, or point us to someone the city should hear from. We'll bring the questions.", cta: "Offer an interview", href: "#/contribute/interview" },
    { h: "Be a correspondent", p: "Keep an eye on a beat or a neighborhood over time. Loose, volunteer, credited, and genuinely useful to the whole city.", cta: "Volunteer for a beat", href: "#/contribute/correspondent" },
  ];
  return (
    <main className="route">
      <section className="phead join-hero">
        <div className="wrap">
          <div className="phead__kick">Get Involved</div>
          <h1 className="phead__title">Help write Alliance's<br />next chapter.</h1>
          <p className="phead__dek">The Carnation is an independent newsroom with a wide, open circle of contributors.<br />If you live here and want the city told well, there's a place for you in it.</p>
          <hr className="rule rule--double phead__rule" />
        </div>
      </section>

      <section className="section section--tight">
        <div className="wrap">
          <SecRule title="Ways to pitch in" meta={ways.length + " ways"} />
          <Reveal>
            <div className="join-ways rise">
              {ways.map((w, i) => (
                <div className="join-way" key={w.h}>
                  <span className="join-way__n">№ {String(i + 1).padStart(2, "0")}</span>
                  <h3 className="join-way__h">{w.h}</h3>
                  <p className="join-way__p">{w.p}</p>
                  <a className="join-way__cta" href={w.href}>{w.cta} <span className="arw">→</span></a>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </section>

      <section className="section section--tight">
        <div className="wrap wrap--mid">
          <div className="dual">
            <div className="dual__cell">
              <span className="dual__kick">Spread the word</span>
              <h3 className="dual__h">Become a Carnation Ambassador.</h3>
              <p className="dual__p">Some of the most valuable work is not writing. It is connecting. Introduce a local business to the Local Index, bring a few readers into the circle, or host a small meetup. You help the city find its own publication.</p>
              <p className="dual__p" style={{color:"var(--muted)", fontSize:".95rem"}}>We are a no-paywall publication, so this is not a sales job and there is no commission. What we offer instead is recognition: a place among our founding ambassadors, early access, and a standing line to the editors.</p>
              <a className="btn btn--red" href="#/contribute/ambassador" style={{marginTop:"auto", alignSelf:"flex-start"}}>Become an ambassador <span className="arw">→</span></a>
            </div>
            <div className="dual__cell dual__cell--ink">
              <span className="dual__kick">What ambassadors do</span>
              <ul className="amb-list">
                <li>Introduce local businesses to the Local Index.</li>
                <li>Bring readers and supporters into the circle.</li>
                <li>Host or help at a reader meetup.</li>
                <li>Carry the word into rooms we can't reach.</li>
              </ul>
              <p className="dual__p" style={{marginTop:"18px"}}>Recognition, not commission. The news stays free for everyone.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="section section--ink section--tight">
        <div className="wrap wrap--mid join-real">
          <div className="join-real__main">
            <div className="phead__kick" style={{color:"#e0a9b1"}}>Straight with you</div>
            <h2 className="join-real__h">Contribute now for the byline.<br />Share in what it becomes.</h2>
            <p className="join-real__p">The Carnation is independent and free to read, built by a growing circle of local contributors.</p>
            <p className="join-real__p">Contributing is volunteer work for now, done for the byline and the credit rather than a check.</p>
            <p className="join-real__p">What you get back is real: a published clip with genuine editing, a hand in how the city sees itself, and a front-row place as the publication grows. As support grows, paid commissions are the goal, and the people who showed up early are first in line.</p>
            <div className="join-real__actions">
              <a className="btn btn--red" href="#/contribute/write">Start contributing <span className="arw">→</span></a>
              <a className="btn btn--line join-real__btn" href="#/contact">Write to the newsroom</a>
            </div>
          </div>
          <CarnationMark compact className="join-real__mark" />
        </div>
      </section>

      <section className="section section--tight">
        <div className="wrap wrap--mid join-close">
          <p className="join-close__line">Not sure where you fit? Tell us what you're into.</p>
          <p className="join-close__line">We read everything that comes in. <a href="#/contact">Come say hello <span className="arw">→</span></a></p>
        </div>
      </section>
    </main>
  );
}

window.JoinPage = JoinPage;