/* sec-execute.jsx — What we execute (cards) + How credits work (interactive) */
const { useState: useStateE } = React;

/* ---------------- WHAT WE EXECUTE ---------------- */
const EXECUTE = [
  { i: "marketing", t: "Marketing", d: "Launch campaigns, pages and assets faster.",
    items: ["Landing pages & funnels", "Email & lifecycle sequences", "Ad creative & variants", "Brand & social assets"] },
  { i: "ops", t: "Operations", d: "Remove bottlenecks and build systems that scale.",
    items: ["SOPs & playbooks", "CRM setup & cleanup", "Dashboards & reporting", "Process optimisation"] },
  { i: "automation", t: "Automation", d: "Eliminate manual work and increase output.",
    items: ["Zapier / Make workflows", "AI agents & assistants", "Tool integrations", "Data syncs & enrichment"] },
  { i: "dev", t: "Development", d: "Build what your business needs next.",
    items: ["Websites & web apps", "API & system integrations", "Internal tools", "Fixes & feature work"] },
  { i: "consult", t: "Consulting", d: "Make better decisions and move faster.",
    items: ["GTM & growth strategy", "Tech-stack architecture", "Funnel & conversion audits", "Roadmapping"] },
  { i: "shield", t: "EU Compliance", d: "Prepare AI and data workflows for European requirements.",
    items: ["GDPR readiness", "AI Act mapping", "Risk & policy workflows", "Documentation packs"] },
];

function Execute() {
  return (
    <section className="section" id="execute">
      <div className="wrap">
        <div className="section-head reveal">
          <div className="kicker"><span className="dot" /> What we execute</div>
          <h2>Whatever moves<br/>the business forward.</h2>
          <p>Six disciplines, one team, one queue. Point your capacity at whatever matters most this
             month — and shift it the moment priorities change.</p>
        </div>
        <div className="exec-grid">
          {EXECUTE.map((e, i) => {
            const Ico = Icons[e.i];
            return (
              <div className={"exec-card reveal card" + (i === 0 ? " exec-card--wide" : "")} data-d={(i%4)} key={e.t}>
                <div className="exec-top">
                  <div className="exec-ico"><Ico size={22}/></div>
                  <span className="tag">0{i+1}</span>
                </div>
                <h3>{e.t}</h3>
                <p className="exec-d">{e.d}</p>
                <ul className="exec-list">
                  {e.items.map((it) => (
                    <li key={it}><Icons.check size={14} sw={2.2}/> {it}</li>
                  ))}
                </ul>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ---------------- HOW CREDITS WORK ---------------- */
const PACKS = [
  { id: "starter", name: "Starter", credits: 20000,  price: 2000, per: "10 cr / $1",  blurb: "Test the engine",
    use: ["Landing page", "CRM cleanup", "SOP package", "1 automation"] },
  { id: "growth",  name: "Growth",  credits: 50000,  price: 4250, per: "~12 cr / $1", blurb: "Most popular", best: true,
    use: ["Landing page", "CRM setup", "2–3 automations", "Dashboard", "Email sequence", "SOPs"] },
  { id: "scale",   name: "Scale",   credits: 120000, price: 9000, per: "~13 cr / $1", blurb: "Always-on output",
    use: ["Multiple launches", "CRM overhaul", "AI agents", "Dashboards", "Internal tools", "Ongoing execution"] },
];
const TASKS = [
  { t: "Landing page + 2 variants", c: 4000, cat: "Marketing" },
  { t: "6-email launch sequence", c: 3000, cat: "Marketing" },
  { t: "CRM cleanup & pipeline setup", c: 4000, cat: "Operations" },
  { t: "Zapier automation (5 zaps)", c: 3000, cat: "Automation" },
  { t: "AI support agent", c: 5000, cat: "Automation" },
  { t: "Marketing site (5 pages)", c: 8000, cat: "Development" },
  { t: "Revenue dashboard", c: 5000, cat: "Development" },
  { t: "Onboarding SOP + Loom", c: 2000, cat: "Operations" },
  { t: "Growth strategy audit", c: 4000, cat: "Consulting" },
];
const fmt = (n) => "$" + n.toLocaleString();
const fmtCr = (n) => n.toLocaleString();

function Credits() {
  const [pack, setPack] = useStateE("growth");
  const [basket, setBasket] = useStateE(["Landing page + 2 variants", "Zapier automation (5 zaps)", "Onboarding SOP + Loom"]);
  const current = PACKS.find((p) => p.id === pack);
  const used = TASKS.filter((t) => basket.includes(t.t)).reduce((a, t) => a + t.c, 0);
  const remaining = current.credits - used;
  const rate = (current.price / current.credits);

  const toggle = (t) => {
    setBasket((b) => {
      if (b.includes(t.t)) return b.filter((x) => x !== t.t);
      if (remaining - t.c < 0) return b; // won't fit
      return [...b, t.t];
    });
  };

  return (
    <section className="section credits" id="credits">
      <div className="wrap">
        <div className="section-head reveal">
          <div className="kicker"><span className="dot" /> How it works</div>
          <h2>Scale output.<br/>Credits handle the logistics.</h2>
          <p>Credits are simply how you allocate execution across the business. Need marketing this
             month, automation the next, dashboards or development after that? Same credits. Your
             priorities change — your execution capacity doesn't. And they never expire.</p>
        </div>

        {/* 3 steps */}
        <div className="steps">
          {[
            { n:"01", t:"Buy capacity", d:"Choose a pack. One transaction, one invoice." },
            { n:"02", t:"Submit tickets", d:"Drop work in the queue. Reprioritise anytime." },
            { n:"03", t:"Get it shipped", d:"We execute. Credits draw down per ticket." },
          ].map((s, i) => (
            <React.Fragment key={s.n}>
              <div className="step reveal card" data-d={i}>
                <span className="step-n mono">{s.n}</span>
                <h3>{s.t}</h3>
                <p>{s.d}</p>
              </div>
              {i < 2 && <div className="step-arrow reveal" data-d={i}><Icons.arrow size={20}/></div>}
            </React.Fragment>
          ))}
        </div>

        {/* Interactive calculator */}
        <div className="calc reveal card">
          <div className="calc-left">
            <span className="tag">Choose your execution capacity</span>
            <div className="calc-packs">
              {PACKS.map((p) => (
                <button key={p.id} onClick={() => setPack(p.id)}
                        className={"pack" + (pack === p.id ? " pack--on" : "") + (p.best ? " pack--best" : "")}>
                  {p.best && <span className="pack-flag mono">Most popular</span>}
                  <span className="pack-name">{p.name}</span>
                  <span className="pack-cr mono">{fmtCr(p.credits)} credits</span>
                  <span className="pack-price">{fmt(p.price)}</span>
                  <span className="pack-rate mono">{p.per}</span>
                  <span className="pack-use"><span className="pack-use-l mono">Typical month</span>{p.use.join(" · ")}</span>
                </button>
              ))}
            </div>
            <p className="calc-note mono">$1 = 10 credits · Never expire · Better rates at scale</p>
          </div>

          <div className="calc-right">
            <div className="calc-meter-top">
              <span className="tag">Build a sample month</span>
              <span className={"calc-rem mono" + (remaining < 2000 ? " calc-rem--low" : "")}>
                {fmtCr(remaining)} / {fmtCr(current.credits)} credits left
              </span>
            </div>
            <p className="calc-sub">See what a typical month of execution looks like.</p>
            <div className="calc-bar">
              <div className="calc-bar-fill" style={{ width: (used / current.credits * 100) + "%" }} />
            </div>
            <div className="calc-tasks">
              {TASKS.map((t) => {
                const on = basket.includes(t.t);
                const fits = on || remaining - t.c >= 0;
                return (
                  <button key={t.t} disabled={!fits}
                          onClick={() => toggle(t)}
                          className={"ctask" + (on ? " ctask--on" : "") + (!fits ? " ctask--off" : "")}>
                    <span className="ctask-box">{on && <Icons.check size={12} sw={2.6}/>}</span>
                    <span className="ctask-t">{t.t}</span>
                    <span className="ctask-cat mono">{t.cat}</span>
                    <span className="ctask-c mono">{fmtCr(t.c)} cr</span>
                  </button>
                );
              })}
            </div>
            <div className="calc-foot">
              <span className="mono">{basket.length} tasks · {fmtCr(used)} credits used</span>
              <a className="btn btn-primary" href="#start">Start with {current.name} <Icons.arrow size={16}/></a>
            </div>
            <p className="calc-cap">Equivalent output from several specialists — delivered through one
               queue, without a single new hire.</p>
          </div>
        </div>

        {/* micro-copy: credits = execution budget */}
        <div className="micro reveal">
          <span className="micro-ico"><Icons.bolt size={18}/></span>
          <p><b>Think of credits as an execution budget.</b> Spend them across marketing, operations,
             automation, development and strategy — and reallocate the moment your priorities change.</p>
        </div>

        {/* ROI: compare to hiring */}
        <div className="roi reveal card">
          <div className="roi-head">
            <span className="tag">Compare that to hiring</span>
            <p>What the same output costs as headcount.</p>
          </div>
          <div className="roi-grid">
            {[
              ["Marketing hire", "$60k–120k", "/ year"],
              ["Operations manager", "$70k–140k", "/ year"],
              ["Automation specialist", "$80k–150k", "/ year"],
              ["Agency retainer", "$2k–10k", "/ month"],
            ].map(([role, cost, per]) => (
              <div className="roi-item" key={role}>
                <span className="roi-cost">{cost}</span>
                <span className="roi-per mono">{per}</span>
                <span className="roi-role">{role}</span>
              </div>
            ))}
            <div className="roi-item roi-item--us">
              <span className="roi-usname"><span className="brand-dot" /> Scalexec</span>
              <span className="roi-usline">One team. One queue.<br/>One execution budget.</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Execute, Credits });