// Sections.jsx — Callout, Testimonial, WhyNearshore

const Callout = ({ onCta }) => (
  <section className="container">
    <div className="callout reveal">
      <div>
        <h2 className="display-md">Have a project waiting on the right team?</h2>
        <p>Get a senior LATAM team scoped, interviewed, and shipping in under two weeks. No retainers, no minimums.</p>
      </div>
      <button className="btn btn-on-coral" onClick={onCta}>
        Start a conversation <span className="callout-arrow">&rarr;</span>
      </button>
    </div>
  </section>
);

const Testimonial = () => (
  <section className="container section-tight">
    <div className="quote-card reveal">
      <div className="quote-mark">&ldquo;</div>
      <div className="quote-body">
        We replaced an onshore SAP partner with an Acerti managed team. Same
        seniority, same English fluency, three hours of real-time overlap &mdash;
        at roughly half the onshore rate.
      </div>
      <div className="quote-author">
        <div className="avatar avatar-img">
          <img src="https://randomuser.me/api/portraits/women/52.jpg" alt="Maya R."/>
        </div>
        <div>
          <div className="quote-meta-name">Maya R. &middot; VP Engineering</div>
          <div className="quote-meta-role">Mid-market retail platform, Austin TX</div>
        </div>
      </div>
    </div>
  </section>
);

const WhyNearshore = () => (
  <section className="container section" id="why">
    <div className="section-header reveal">
      <div className="eyebrow"><span className="mark"/>WHY NEARSHORE LATAM</div>
      <h2>Same timezone. Same fluency. A different cost curve.</h2>
    </div>
    <div className="grid-3">
      {[
        { t: "Time-zone overlap", b: "Mexico and most LATAM hubs sit inside PST\u2013EST. Standups happen at standup time, not at 6am." },
        { t: "English fluency \u0026 culture", b: "C1+ English is a hiring floor. Cultural alignment with North American product norms is built in." },
        { t: "40\u201360% cost savings", b: "LATAM senior rates run 40\u201360% below US onshore \u2014 without the offshore handoff cost." },
        { t: "AI-vetted talent pool", b: "Our matching system scores 4,000+ candidates on past assignments, skills, and client feedback." },
        { t: "US-headquartered contract", b: "You contract with a US LLC. Legal, IP, and tax sit in the same jurisdiction as your business." },
        { t: "Real partnership, not staffing", b: "Acerti tech leads stay on the engagement. The team is yours; the accountability is ours." },
      ].map((f, i) => (
        <div className="feature-card reveal" data-d={(i % 3) + 1} key={f.t}>
          <h4 className="title-md">{f.t}</h4>
          <p>{f.b}</p>
        </div>
      ))}
    </div>
  </section>
);

Object.assign(window, { Callout, Testimonial, WhyNearshore });