// Careers / Recruiting — invites cleaners to apply.
const RT = window.Tokens;

function Careers() {
  return (
    <section id="careers" style={{ background: RT.mist, color: RT.charcoal }}>
      <div className="apex-section">
        <div className="apex-careers-grid">
          <div>
            <Eyebrow>We're hiring</Eyebrow>
            <h2 className="apex-h2" style={{ ...window.Atoms.heading, marginTop: 12 }}>
              Clean homes, on a real schedule, with a small team.
            </h2>
            <hr style={{ width: 64, height: 1, background: RT.gold, border: 0, margin: "16px 0 0" }} />

            {/* Perks list — no mileage / no supplies / no Fort Wayne specificity */}
            <ul className="apex-perks">
              {[
                ["Real schedule",     "Set weekly hours — not gig-app whiplash."],
                ["Daytime only",      "Mon–Fri day shifts. Home by dinner."],
                ["Tips kept in full", "Anything customers tip you, you keep."],
                ["Steady routes",     "Same neighborhoods week to week — drives stay short."],
              ].map(([h, s]) => (
                <li key={h}>
                  <div>
                    <p className="apex-perk-h" dangerouslySetInnerHTML={{ __html: h }} />
                    <p className="apex-perk-s" dangerouslySetInnerHTML={{ __html: s }} />
                  </div>
                </li>
              ))}
            </ul>
          </div>

          {/* Application card */}
          <aside className="apex-apply-card">
            <p style={{ margin: 0, fontFamily: RT.fontSans, fontSize: 11, fontWeight: 700,
                        textTransform: "uppercase", letterSpacing: "0.28em", color: RT.burgundyAccent }}>
              Now hiring
            </p>
            <h3 style={{ margin: "10px 0 0", fontFamily: RT.fontSerif, fontWeight: 400,
                         fontSize: 26, lineHeight: 1.1, letterSpacing: "0.02em", color: RT.burgundy }}>
              Cleaner
            </h3>
            <hr style={{ width: 36, height: 1, background: RT.gold, border: 0, margin: "12px 0 0" }} />

            <dl className="apex-apply-meta">
              <div><dt>Schedule</dt><dd>Mon–Fri · day shift · 25–40 hrs/wk</dd></div>
              <div><dt>Start</dt><dd>Within two weeks of application</dd></div>
            </dl>

            <a href="/careers"
               style={{
                 marginTop: 18, display: "inline-flex", alignItems: "center", justifyContent: "center",
                 gap: 10, width: "100%", padding: "16px 18px", minHeight: 52,
                 background: RT.burgundy, color: "#fff", borderRadius: 10,
                 fontFamily: RT.fontSans, fontWeight: 700, fontSize: 13,
                 textTransform: "uppercase", letterSpacing: "0.18em",
                 boxShadow: "0 14px 30px rgba(91,22,25,0.28)", textDecoration: "none",
                 boxSizing: "border-box",
               }}>
              Apply in two minutes
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
            </a>
          </aside>
        </div>
      </div>
    </section>
  );
}

window.Careers = Careers;