/* MECEChoir.jsx — Philadelphia MECE City Choir page.
   Editorial layout matching the Venice / About pages. Email-JJ shortcut
   handles the "how to join" prompt. */

function MECEChoirPage() {
  return (
    <div>
      {/* Hero -- CR #160: photo moved up next to the headline */}
      <section style={{ background: "var(--c-cream)", borderBottom: "2px solid var(--c-ink)" }}>
        <div className="container" style={{ padding: "80px 0 56px" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 48, alignItems: "center" }} className="mece-hero">
            <div>
              <div className="eyebrow">Philadelphia MECE City Choir</div>
              <h1 className="display" style={{ fontSize: "clamp(44px, 7.5vw, 108px)", margin: "12px 0 24px", lineHeight: 0.95 }}>
                One city,<br />one <span style={{ fontStyle: "italic", color: "var(--c-primary)" }}>chorale.</span>
              </h1>
              <p style={{ fontSize: 19, lineHeight: 1.55, color: "var(--c-ink)" }}>
                The Philadelphia MECE City Choir is the citywide chorus for
                current and former City of Philadelphia employees, run by PPR&apos;s
                Performing Arts Office. Members come together for ensemble work,
                public performances, and community showcases throughout the year.
              </p>
              <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--c-ink-soft)", marginTop: 14 }}>
                All voice parts welcome. No audition required to inquire &mdash; we&rsquo;ll
                match you to the right section once we hear you. Membership is
                open to current and former City employees only.
              </p>
              <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 24 }}>
                <a href="mailto:Joseph.J.Pospiech@phila.gov?subject=MECE%20City%20Choir%20%E2%80%94%20Joining%20inquiry" className="btn">
                  Email JJ to join &rarr;
                </a>
                <a href="tel:+12156853585" className="btn secondary">
                  Or call 215-685-3585
                </a>
              </div>
            </div>
            <div style={{
              borderRadius: 22, overflow: "hidden",
              border: "2px solid var(--c-ink)", boxShadow: "var(--shadow-lift)",
              aspectRatio: "4/3",
            }}>
              <img
                src="/img/mece-choir.jpg"
                alt="Philadelphia MECE City Choir performing"
                style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
              />
            </div>
          </div>
        </div>
        <style>{`
          @media (max-width: 900px) { .mece-hero { grid-template-columns: 1fr !important; gap: 28px !important; } }
        `}</style>
      </section>

      {/* About the choir -- text-only section now that the photo is in the hero */}
      <section className="section">
        <div className="container" style={{ maxWidth: 760 }}>
          <div className="eyebrow">About the choir</div>
          <h2 className="display" style={{ fontSize: "clamp(34px, 4.5vw, 56px)", marginTop: 12, lineHeight: 1 }}>
            Voices from every neighborhood.
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: "var(--c-ink)", marginTop: 18 }}>
            The Municipal Employees Choral Ensemble (M.E.C.E.) is comprised
            exclusively of current and former City of Philadelphia employees from
            various city departments who come together during the Christmas
            holiday season &mdash; and occasionally throughout the year &mdash;
            to lift their voices in song and spread joy and cheer to their
            co-workers.
          </p>
          <p style={{ fontSize: 15, lineHeight: 1.6, color: "var(--c-ink-soft)", marginTop: 14 }}>
            The choir's earliest roots go as far back as the early 80s. The
            current iteration took shape in 1995 as an a capella ensemble. In
            1998, Joette Wood-Patrick became M.E.C.E.'s Director, and shortly
            thereafter Dwayne Bowens joined as Maestro Emeritus of Music. They
            collaborated on fresh new arrangements, keeping up with the times
            and growing the group into a polished, professional ensemble.
          </p>
          <p style={{ fontSize: 15, lineHeight: 1.6, color: "var(--c-ink-soft)", marginTop: 14 }}>
            Upon Joette's retirement in 2015, directing was taken over by Toni
            Curtis-Ford. In 2017, Clarence Nelson stepped in as M.E.C.E.'s
            Director, and upon Clarence's retirement in 2023, Latief Pinder
            took on the role and continues to direct the choir today.
          </p>
          <p style={{ fontSize: 15, lineHeight: 1.6, color: "var(--c-ink-soft)", marginTop: 14 }}>
            Over the years, M.E.C.E. has performed at the Municipal Services
            Building's Christmas Celebrations (yearly), the Department of Human
            Services' Christmas Celebrations (yearly), Love Park's tree
            lighting and Christmas Celebrations, the City of Philadelphia
            Employees Art Exhibit Awards Reception, the Mural Arts Civic Views
            installation, and Philadelphia International Airport &mdash; among
            many others.
          </p>
        </div>
      </section>

      {/* Join CTA */}
      <section className="section-tight" style={{ background: "var(--c-ink)", color: "var(--c-cream)" }}>
        <div className="container">
          <div className="card" style={{
            background: "var(--c-primary)",
            color: "var(--c-ink)",
            padding: 32,
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            gap: 20,
            flexWrap: "wrap",
          }}>
            <div>
              <div className="eyebrow">Book the choir</div>
              <div className="display" style={{ fontSize: 36, marginTop: 6, lineHeight: 1 }}>
                Drop JJ a line.
              </div>
              <p style={{ fontSize: 14.5, color: "var(--c-ink)", marginTop: 8, maxWidth: 540 }}>
                The choir performs at City celebrations, holiday programs,
                awards ceremonies, and community events across Philadelphia.
                To inquire about booking the group, drop JJ a line &mdash;
                tell us about your event, the date, the location, and what
                you have in mind. He&rsquo;ll follow up with availability
                and details.
              </p>
            </div>
            <a href="mailto:Joseph.J.Pospiech@phila.gov?subject=MECE%20City%20Choir%20%E2%80%94%20Booking%20inquiry" className="btn">
              Email JJ &rarr;
            </a>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { MECEChoirPage });