// Models.jsx — delivery models tier cards + process steps

const Models = ({ onChoose }) => {
  const tiers = [
    {
      name: "Project-Based",
      tag: "Fixed scope",
      desc: "Defined deliverables, defined timeline, defined budget.",
      bullets: ["AI-matched team", "Fixed-price contract", "Weekly demos", "QA + handoff"],
      featured: false,
      cta: "Scope a project",
    },
    {
      name: "Managed Teams",
      tag: "Most chosen",
      desc: "A dedicated squad embedded into your engineering org.",
      bullets: ["Dedicated 4\u201312 engineers", "Acerti tech lead included", "Real-time PST/EST overlap", "Monthly retro + roadmap"],
      featured: true,
      cta: "Build a team",
    },
    {
      name: "Staff Augmentation",
      tag: "Per seat \u00b7 ramp in days",
      desc: "Senior individuals slotted into your existing process.",
      bullets: ["Senior-only roster", "Ramp in 5\u201310 days", "Direct daily collaboration", "Month-to-month"],
      featured: false,
      cta: "Add a seat",
    },
  ];
  return (
    <section className="container section" id="models">
      <div className="section-header reveal">
        <div className="eyebrow"><span className="mark"/>DELIVERY MODELS</div>
        <h2>Pick the shape of the engagement.</h2>
        <p>
          Three contracting models, one team of senior LATAM consultants. We help
          you choose based on scope clarity, in-house engineering bandwidth, and
          duration.
        </p>
      </div>
      <div className="grid-3">
        {tiers.map((t, i) => (
          <div key={t.name} className={"model-card reveal" + (t.featured ? " featured" : "")} data-d={i + 1}>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
              <h4 className="title-lg">{t.name}</h4>
              {t.featured && (
                <span style={{ fontFamily: "var(--font-body)", fontSize: 11, fontWeight: 500, letterSpacing: 1.5, textTransform: "uppercase", background: "var(--primary)", color: "var(--on-primary)", padding: "4px 10px", borderRadius: 9999 }}>
                  POPULAR
                </span>
              )}
            </div>
            <div className="price-line">{t.tag}</div>
            <p style={{ fontSize: 15 }}>{t.desc}</p>
            <div className="divider-1" />
            <div className="checks">
              {t.bullets.map((b) => (
                <div className="check" key={b}><span className="dot"/>{b}</div>
              ))}
            </div>
            <button
              className={"btn " + (t.featured ? "btn-primary" : "btn-secondary")}
              style={{ marginTop: 12, alignSelf: "flex-start" }}
              onClick={() => onChoose && onChoose(t.name)}
            >
              {t.cta} &rarr;
            </button>
          </div>
        ))}
      </div>
    </section>
  );
};

const ProcessSteps = () => {
  const steps = [
    { tag: "01 \u00b7 DAY 1\u20132",   title: "Discovery call",         body: "Outcome you want, stack you're on, timeline you're under. No NDA gates for the first conversation." },
    { tag: "02 \u00b7 DAY 3\u20135",   title: "AI match + shortlist",   body: "Our matching system narrows from ~4,000 vetted LATAM consultants to your final 3-engineer panel." },
    { tag: "03 \u00b7 DAY 6\u20139",   title: "Technical interviews",   body: "Your team interviews ours. Replace anyone, no questions asked. Acerti tech lead joins every call." },
    { tag: "04 \u00b7 DAY 10\u201314", title: "Kick-off \u0026 first commit", body: "Environments provisioned, repos cloned, sprint planned. By Friday of week two, code is shipping." },
  ];
  return (
    <section className="container section process-section">
      <div className="process-layout">
        <div className="process-intro reveal">
          <div className="eyebrow"><span className="mark"/>HOW WE WORK</div>
          <h2>From first call to first commit, in two weeks.</h2>
          <p className="process-lede">
            A patient onboarding wrapped in a fast clock. By Friday of week two,
            your nearshore team has cloned the repo and pushed the first commit.
          </p>
        </div>
        <ol className="process-timeline">
          {steps.map((s, i) => (
            <li className="ptl-item reveal" data-d={i + 1} key={s.tag}>
              <div className="ptl-rail">
                <div className="ptl-node">{String(i + 1).padStart(2, "0")}</div>
              </div>
              <div className="ptl-body">
                <div className="ptl-tag">{s.tag}</div>
                <h5 className="title-md ptl-title">{s.title}</h5>
                <p>{s.body}</p>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
};

Object.assign(window, { Models, ProcessSteps });