/* sec-compare.jsx — Comparison tabs */
const { useState: useStateC } = React;

const RIVALS = {
  Freelancer: {
    rows: [
      ["Output capacity", "Across multiple disciplines at once", "One person, one workstream"],
      ["Execution budget efficiency", "Flexible across every discipline", "Locked into one skill"],
      ["Speed to start", "Same day", "Days to find & vet"],
      ["Execution capacity", "A whole team, any discipline", "One person, one skill"],
      ["Reliability", "Backed by a team", "Vanishes mid-project"],
      ["Management", "One queue, we coordinate", "You manage everything"],
    ],
  },
  Agency: {
    rows: [
      ["Output capacity", "Across multiple disciplines simultaneously", "Limited by scope & team allocation"],
      ["Execution budget efficiency", "Flexible across every discipline", "Locked into one scope"],
      ["Speed to start", "Same day", "Weeks of onboarding"],
      ["Flexibility", "Reprioritise anytime", "Locked retainers"],
      ["Commitment", "No contracts", "6–12 month minimums"],
      ["Process", "Submit & ship", "Meetings & decks first"],
    ],
  },
  Employee: {
    rows: [
      ["Output capacity", "Across multiple disciplines simultaneously", "Limited to one role"],
      ["Execution budget efficiency", "Flexible across every discipline", "Locked into one role"],
      ["Speed to start", "Same day", "Months to hire & ramp"],
      ["Cost", "Pay only for output", "Salary, benefits, tools"],
      ["Flexibility", "Scale up or down freely", "Severance & fixed cost"],
      ["Overhead", "Zero", "HR, payroll, management"],
    ],
  },
};

function Compare() {
  const [rival, setRival] = useStateC("Agency");
  const data = RIVALS[rival];
  return (
    <section className="section" id="compare">
      <div className="wrap">
        <div className="section-head reveal">
          <div className="kicker"><span className="dot" /> The comparison</div>
          <h2>Faster, more flexible,<br/>more output.</h2>
          <p>Put Scalexec next to how you'd add capacity today. Pick an option to compare against.</p>
        </div>

        <div className="cmp reveal card">
          <div className="cmp-tabs">
            <span className="cmp-tabs-label mono">Scalexec vs</span>
            {Object.keys(RIVALS).map((r) => (
              <button key={r} className={"cmp-tab" + (rival === r ? " cmp-tab--on" : "")}
                      onClick={() => setRival(r)}>{r}</button>
            ))}
          </div>
          <div className="cmp-head">
            <span />
            <span className="cmp-col cmp-col--us"><span className="brand-dot cmp-usdot"/> Scalexec</span>
            <span className="cmp-col cmp-col--them">{rival}</span>
          </div>
          <div className="cmp-rows">
            {data.rows.map(([label, us, them]) => (
              <div className="cmp-row" key={label}>
                <span className="cmp-label">{label}</span>
                <span className="cmp-cell cmp-cell--us"><Icons.check size={15} sw={2.4}/> {us}</span>
                <span className="cmp-cell cmp-cell--them"><Icons.x size={14} sw={2}/> {them}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Compare });