/* sec-switch.jsx — why Scalexec beats old execution options */

const OLD_WAYS = [
  { t: "Hiring employees", note: "Months to value, fixed forever",
    cons: ["Weeks of recruiting", "Payroll, benefits & tools", "Onboarding & ramp-up", "Management overhead"] },
  { t: "Traditional retainers", note: "Locked in, slow to move",
    cons: ["6\u201312 month retainers", "Meetings before output", "Delays & handoffs", "Rigid scope limits"] },
  { t: "Freelancers", note: "Cheap until it isn't",
    cons: ["Unreliable availability", "One skill, one person", "Hard to manage", "Vanish mid-project"] },
];
const SX_WINS = ["Same-day start", "One team, every discipline", "One queue, one invoice", "No contracts, no payroll", "Scale up or down instantly", "Execution that just ships"];

function Switch() {
  return (
    <section className="section switch" id="switch">
      <div className="wrap">
        <div className="section-head reveal">
          <div className="kicker"><span className="dot" /> Why Scalexec</div>
          <h2>Every other option<br/>costs you time you<br/>don't have.</h2>
          <p>Every traditional way of increasing output comes with overhead — weeks of setup, fixed
             cost and management. Scalexec removes the overhead and keeps the output.</p>
        </div>

        <div className="switch-grid">
          {OLD_WAYS.map((w, i) => (
            <div className="sw-card sw-old reveal card" data-d={i} key={w.t}>
              <div className="sw-head">
                <h3>{w.t}</h3>
                <span className="sw-note">{w.note}</span>
              </div>
              <ul className="sw-list">
                {w.cons.map((c) => (
                  <li key={c}><span className="sw-x"><Icons.x size={12} sw={2.4}/></span>{c}</li>
                ))}
              </ul>
            </div>
          ))}

          <div className="sw-card sw-new reveal card" data-d="3">
            <div className="sw-glow" />
            <div className="sw-head">
              <div className="sw-brand">
                <span className="brand-mark sw-mark">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.7"
                       strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                    <path d="M4.5 5.5L10.5 12l-6 6.5" />
                    <path d="M12 5.5L18 12l-6 6.5" style={{opacity:0.5}} />
                  </svg>
                </span>
                <h3>Scalexec</h3>
              </div>
              <span className="sw-note sw-note--on">Output, starting today</span>
            </div>
            <ul className="sw-list">
              {SX_WINS.map((c) => (
                <li key={c}><span className="sw-c"><Icons.check size={12} sw={2.6}/></span>{c}</li>
              ))}
            </ul>
            <a className="btn btn-primary sw-cta" href="#credits">Get started <Icons.arrow size={16}/></a>
          </div>
        </div>

        <div className="trustband reveal card">
          <div className="tb-lead">
            <span className="tag">Controlled execution</span>
            <p>Execution backed by AI-supported workflows, documented processes and enterprise-grade
               accountability. <em>Reliable. Traceable. Built to scale.</em></p>
          </div>
          <div className="tb-items">
            {[
              ["shield","Reliable, on-time output"],
              ["layers","Traceable execution"],
              ["check","Fully documented workflows"],
              ["spark","GDPR & AI-Act aware"],
            ].map(([ic, label]) => {
              const Ico = Icons[ic];
              return (
                <div className="tb-item" key={label}>
                  <span className="tb-ico"><Ico size={17}/></span>{label}
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Switch });