// Talent.jsx — LATAM careers / talent teaser block

const Talent = ({ onCta }) => (
  <section className="container section" id="careers">
    <div className="talent">
      <div className="reveal">
        <div className="eyebrow"><span className="mark"/>CAREERS &middot; LATAM</div>
        <h2 style={{ marginBottom: 18 }}>Engineers in Mexico City. Architects in S&atilde;o Paulo. Designers in Bogot&aacute;.</h2>
        <p style={{ fontSize: 17, lineHeight: 1.6, color: "var(--body)", marginBottom: 24, maxWidth: 520 }}>
          Acerti hires senior LATAM talent that wants the depth of North American work
          without the move. We pay in USD, run async-first, and stake our reputation on
          the consultants we put in front of clients.
        </p>
        <div className="talent-tags">
          {["Senior engineers", "ERP consultants", "AI/ML practitioners", "Salesforce architects", "Voice + ML eng.", "Design systems"].map((t) => (
            <span className="tag" key={t}>{t}</span>
          ))}
        </div>
        <div style={{ marginTop: 32, display: "flex", gap: 12 }}>
          <button className="btn btn-primary" onClick={onCta}>Join the roster &rarr;</button>
          <a className="btn btn-secondary" href="careers.html#roles">See open roles</a>
        </div>
      </div>

      <div className="talent-card reveal" data-d="2">
        <div className="caption-up" style={{ color: "var(--muted)", marginBottom: 8 }}>Roster snapshot</div>
        {[
          { photo: "https://randomuser.me/api/portraits/women/68.jpg", name: "Mariana C.", meta: "Senior SAP S/4HANA \u00b7 Mexico City \u00b7 9 yrs", skill: "ABAP \u00b7 Fiori" },
          { photo: "https://randomuser.me/api/portraits/men/32.jpg", name: "Diego P.", meta: "Staff iOS \u00b7 Buenos Aires \u00b7 7 yrs", skill: "Swift \u00b7 SwiftUI" },
          { photo: "https://randomuser.me/api/portraits/women/44.jpg", name: "Renata S.", meta: "AI voice engineer \u00b7 S\u00e3o Paulo \u00b7 6 yrs", skill: "PyTorch" },
          { photo: "https://randomuser.me/api/portraits/men/15.jpg", name: "Tom\u00e1s L.", meta: "Salesforce architect \u00b7 Bogot\u00e1 \u00b7 11 yrs", skill: "Apex \u00b7 LWC" },
          { photo: "https://randomuser.me/api/portraits/women/22.jpg", name: "Ana F.", meta: "Design lead \u00b7 Guadalajara \u00b7 8 yrs", skill: "Figma" },
        ].map((r) => (
          <div className="row" key={r.name}>
            <img className="ava" src={r.photo} alt={r.name} />
            <div>
              <div className="who">{r.name}</div>
              <div className="meta">{r.meta}</div>
            </div>
            <span className="skill">{r.skill}</span>
          </div>
        ))}
      </div>
    </div>
  </section>
);

Object.assign(window, { Talent });