/* Volunteer.jsx -- Volunteer Opportunities page under Get Involved (CR #209).
   Walks volunteers through the two PA clearances they need before they can
   step into a PPR program, then sends them to JJ to request a placement. */

function VolunteerPage() {
  return (
    <div>
      {/* Hero */}
      <section style={{ background: "var(--c-cream)", borderBottom: "2px solid var(--c-ink)" }}>
        <div className="container" style={{ padding: "80px 0 56px" }}>
          <div className="eyebrow">Get Involved</div>
          <h1 className="display" style={{ fontSize: "clamp(48px, 8.4vw, 124px)", margin: "12px 0 24px", lineHeight: 0.95 }}>
            Volunteer with<br /><span style={{ fontStyle: "italic", color: "var(--c-primary)" }}>PPR.</span>
          </h1>
          <p style={{ fontSize: 19, lineHeight: 1.55, color: "var(--c-ink)", maxWidth: 720 }}>
            PPR&rsquo;s Performing Arts Office welcomes volunteers across the city &mdash; helping
            backstage at showcases, supporting camps, mentoring teaching artists, or running
            errands on event day. Before stepping into a program, every volunteer needs two
            Pennsylvania clearances. Both are free for volunteers.
          </p>
        </div>
      </section>

      {/* Two-step clearance flow */}
      <section className="section" style={{ background: "var(--c-paper)", borderBottom: "2px solid var(--c-ink)" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 28 }} className="volunteer-steps">
            <ClearanceCard
              step="Step 01"
              title="PA Child Abuse Clearance"
              body="The PA Child Welfare Portal handles the volunteer child abuse history clearance. Create an account, fill out the volunteer application (not the paid-employee one), and submit. Most volunteers get cleared in 14 days or less."
              tips={[
                "Pick the VOLUNTEER application, not the employment application. Volunteers are free; the paid version costs $13.",
                "You'll need your address history for the last 10 years and the names of every adult who lived with you in that time.",
                "Save the PDF clearance certificate. PPR needs a copy before your first shift.",
              ]}
              ctaHref="https://www.compass.dhs.pa.gov/cwis"
              ctaLabel="Start on PA Child Welfare Portal"
            />
            <ClearanceCard
              step="Step 02"
              title="PA Criminal Background Check"
              body="The Pennsylvania State Police background check (PATCH) runs in parallel with the child abuse clearance. Volunteers get the PSP check free; you can either request it as a paper form or run the online request, and the system emails the result usually within minutes."
              tips={[
                "On the request type screen, pick VOLUNTEER (free). The PAID option will charge you.",
                "Have a photo ID, your full address, and prior addresses for the past 5 years ready.",
                "Save the resulting certificate PDF. PPR needs a copy before your first shift.",
              ]}
              ctaHref="https://epatch.pa.gov/home"
              ctaLabel="Start on PSP ePATCH"
            />
          </div>
        </div>
        <style>{`
          @media (max-width: 900px) { .volunteer-steps { grid-template-columns: 1fr !important; } }
        `}</style>
      </section>

      {/* CTA -- email JJ */}
      <section className="section">
        <div className="container" style={{ maxWidth: 760 }}>
          <div className="eyebrow">Next step</div>
          <h2 className="display" style={{ fontSize: "clamp(34px, 4.5vw, 56px)", marginTop: 12, lineHeight: 1, marginBottom: 18 }}>
            Email JJ to request a volunteer opportunity.
          </h2>
          <p style={{ fontSize: 16, color: "var(--c-ink-soft)", lineHeight: 1.6, marginBottom: 28, maxWidth: 600 }}>
            Once both clearances are in hand, send JJ a quick note with a copy of each
            certificate, your neighborhood, and what you&rsquo;d like to help with. He&rsquo;ll
            match you with a rec center or program that fits your schedule.
          </p>
          <div className="card" style={{
            background: "var(--c-cream-deep)",
            padding: "24px 28px",
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            flexWrap: "wrap",
            gap: 14,
          }}>
            <div>
              <div className="display" style={{ fontSize: 22 }}>Ready to volunteer?</div>
              <div style={{ fontSize: 13.5, color: "var(--c-ink-soft)", marginTop: 4 }}>
                JJ replies personally, usually within a couple of business days.
              </div>
            </div>
            <a
              href="mailto:Joseph.J.Pospiech@phila.gov?subject=Volunteer%20opportunity%20with%20PPR%20Performing%20Arts"
              className="btn"
            >
              Email JJ &rarr;
            </a>
          </div>
        </div>
      </section>
    </div>
  );
}

function ClearanceCard({ step, title, body, tips, ctaHref, ctaLabel }) {
  return (
    <div className="card" style={{ padding: 28, 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}</div>
      <div className="display" style={{ fontSize: 28, marginTop: 8, lineHeight: 1.05 }}>{title}</div>
      <p style={{ fontSize: 14.5, color: "var(--c-ink)", lineHeight: 1.6, marginTop: 14 }}>{body}</p>
      <ul style={{ marginTop: 16, paddingLeft: 18, fontSize: 13.5, color: "var(--c-ink-soft)", lineHeight: 1.6 }}>
        {tips.map((t, i) => <li key={i} style={{ marginBottom: 6 }}>{t}</li>)}
      </ul>
      <div style={{ marginTop: 18 }}>
        <a
          href={ctaHref}
          target="_blank"
          rel="noopener"
          className="btn small ochre"
        >
          {ctaLabel} &rarr;
        </a>
      </div>
    </div>
  );
}

Object.assign(window, { VolunteerPage });