/* sec-problem.jsx — Problem (chaos) + Solution (one team) */

const CHAOS = [
  { k: "23", l: "projects stalled", note: "started with momentum, quietly abandoned" },
  { k: "6", l: "vendors to manage", note: "each a separate process, invoice and inbox" },
  { k: "9hrs", l: "lost to coordination", note: "kickoffs, check-ins, chasing status" },
  { k: "$0", l: "growth from your backlog", note: "ideas don't compound until they ship" },
];

function Problem() {
  return (
    <section className="section" id="problem">
      <div className="wrap">
        <div className="section-head reveal">
          <div className="kicker"><span className="dot" /> The status quo</div>
          <h2>You don't have a<br/>strategy problem.</h2>
          <p>You have an execution bottleneck. Growth stalls the moment execution can't keep up — and
             every project sitting unfinished is value you've already paid for but haven't banked.
             The cost of delay is almost always higher than the cost of execution.</p>
        </div>

        <div className="chaos-grid">
          {CHAOS.map((c, i) => (
            <div className="chaos-card reveal card" data-d={i % 4} key={c.l}>
              <div className="chaos-k">{c.k}</div>
              <div className="chaos-l">{c.l}</div>
              <div className="chaos-note">{c.note}</div>
            </div>
          ))}
        </div>

        <div className="pain-row reveal">
          {[
            "Hiring takes months and locks in fixed cost",
            "Managing freelancers becomes a second job",
            "Traditional retainers are slow, rigid and scope-locked",
          ].map((p) => (
            <div className="pain" key={p}>
              <span className="pain-x"><Icons.x size={14} sw={2.2}/></span>{p}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Solution() {
  return (
    <section className="section sol" id="solution">
      <div className="wrap">
        <div className="sol-grid">
          <div className="sol-copy reveal">
            <div className="kicker"><span className="dot" /> The fix</div>
            <h2>One execution<br/>department. On tap.</h2>
            <p>Most execution bottlenecks are treated like hiring problems. Scalexec solves them by
               increasing output. Instead of adding payroll, onboarding and management overhead, you get
               immediate access to an execution department shipping across marketing, systems,
               automation, development and operations.</p>
            <a className="btn btn-ghost" href="#execute" style={{marginTop:"28px"}}>
              See what we execute <Icons.arrow size={17}/>
            </a>
          </div>
          <div className="sol-three">
            {[
              { i: "layers", t: "Replaces a team", d: "Marketers, builders, automation and ops — the capacity of several hires, no payroll." },
              { i: "automation", t: "One queue", d: "Every project in one place. Prioritise, reorder and track straight to delivered." },
              { i: "cube", t: "No overhead", d: "No recruiting, onboarding, contracts or management. Capacity that starts the same day." },
            ].map((s, idx) => {
              const Ico = Icons[s.i];
              return (
                <div className="sol-card reveal card" data-d={idx + 1} key={s.t}>
                  <div className="sol-ico"><Ico size={22}/></div>
                  <div className="sol-card-body">
                    <h3>{s.t}</h3>
                    <p>{s.d}</p>
                  </div>
                  <span className="sol-num mono">0{idx+1}</span>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Problem, Solution });