/* Employment.jsx -- public Employment Resources page.
   Shows the FBI Clearance instructions and links into the full online
   Application for Temporary Employment. The express-interest form was
   removed (CR #213) -- applicants go straight to the full application. */

function EmploymentPage() {
  return (
    <div>
      {/* Hero -- CR #216: photo moved up next to the headline (MECE-style) */}
      <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="employment-hero">
            <div>
              <div className="eyebrow">Employment</div>
              <h1 className="display" style={{ fontSize: "clamp(44px, 7.5vw, 108px)", margin: "12px 0 24px", lineHeight: 0.95 }}>
                Work with<br /><span style={{ fontStyle: "italic", color: "var(--c-primary)" }}>PPR.</span>
              </h1>
              <p style={{ fontSize: 19, lineHeight: 1.55, color: "var(--c-ink)" }}>
                The Philadelphia Department of Parks &amp; Recreation Performing Arts Office hires
                seasonal and temporary staff for camps, after-school programs, and showcases. If
                you&rsquo;re interested in joining the team, here&rsquo;s how it works.
              </p>
            </div>
            <div style={{
              borderRadius: 22, overflow: "hidden",
              border: "2px solid var(--c-ink)", boxShadow: "var(--shadow-lift)",
              aspectRatio: "4/3",
            }}>
              <img
                src="/img/employment-work-with-ppr.jpg"
                alt="PPR Performing Arts staff and participants at a program"
                style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
                loading="lazy"
              />
            </div>
          </div>
        </div>
        <style>{`
          @media (max-width: 900px) { .employment-hero { grid-template-columns: 1fr !important; gap: 28px !important; } }
        `}</style>
      </section>

      {/* Three-step intro (CR #202: 1=application, 2=fingerprints, 3=medical) */}
      <section className="section" style={{ background: "var(--c-paper)", borderBottom: "2px solid var(--c-ink)" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 22 }} className="employment-steps">

            <div className="card" style={{ padding: 24, background: "var(--c-paper)", border: "2px solid var(--c-ink)", borderRadius: 22 }}>
              <div style={{ fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--c-ink-soft)" }}>Step 01</div>
              <div className="display" style={{ fontSize: 24, marginTop: 8, lineHeight: 1.1 }}>
                Fill out the application online.
              </div>
              <p style={{ fontSize: 14, color: "var(--c-ink)", lineHeight: 1.55, marginTop: 14 }}>
                Complete the City of Philadelphia Application for Temporary Employment.
                Sign at the bottom and we&rsquo;ll generate the official PDF and email it to JJ
                &mdash; no printing required.
              </p>
              <div style={{ marginTop: 18 }}>
                <a href="#employment-apply" className="btn small ochre" onClick={(e) => { e.preventDefault(); window.location.hash = '#employment-apply'; }}>
                  Start application ↗
                </a>
              </div>
            </div>

            <div className="card" style={{ padding: 24, background: "var(--c-paper)", border: "2px solid var(--c-ink)", borderRadius: 22 }}>
              <div style={{ fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--c-ink-soft)" }}>Step 02</div>
              <div className="display" style={{ fontSize: 24, marginTop: 8, lineHeight: 1.1 }}>
                FBI fingerprints.
              </div>
              <p style={{ fontSize: 14, color: "var(--c-ink)", lineHeight: 1.55, marginTop: 14 }}>
                Pre-register at{" "}
                <a href="https://uenroll.identogo.com" target="_blank" rel="noopener" style={{ color: "var(--c-primary-deep)" }}>
                  uenroll.identogo.com
                </a>{" "}
                with service code <strong>1KG756</strong> and pick a Philadelphia
                fingerprinting location. Full instructions in the PDF.
              </p>
              <div style={{ marginTop: 18 }}>
                <a
                  href="/forms/employment-fbi-instructions.pdf"
                  target="_blank"
                  rel="noopener"
                  className="btn small"
                >
                  Download FBI instructions ↗
                </a>
              </div>
            </div>

            <div className="card" style={{ padding: 24, background: "var(--c-paper)", border: "2px solid var(--c-ink)", borderRadius: 22 }}>
              <div style={{ fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--c-ink-soft)" }}>Step 03</div>
              <div className="display" style={{ fontSize: 24, marginTop: 8, lineHeight: 1.1 }}>
                Medical form, signed by a physician.
              </div>
              <p style={{ fontSize: 14, color: "var(--c-ink)", lineHeight: 1.55, marginTop: 14 }}>
                The City requires a Medical Examination form filled out by your physician
                before your first shift. We email this to you with the application
                confirmation, or you can grab it here.
              </p>
              <div style={{ marginTop: 18 }}>
                <a
                  href="/forms/employment-medical-form.pdf"
                  target="_blank"
                  rel="noopener"
                  className="btn small"
                >
                  Download Medical Form ↗
                </a>
              </div>
            </div>

          </div>
        </div>
        <style>{`
          @media (max-width: 1100px) { .employment-steps { grid-template-columns: 1fr 1fr !important; } }
          @media (max-width: 700px)  { .employment-steps { grid-template-columns: 1fr !important; } }
        `}</style>
      </section>

    </div>
  );
}

Object.assign(window, { EmploymentPage });