/* global React */

const STAGES = [
  {
    n: "001",
    t: "Strategy",
    strap: "From research to strategy.",
    desc: "We start by understanding what's actually happening in your category, on your channels, and against your competitors — then build the strategy that ties them together.",
    caps: [
      "Channel Audit", "Competitor Review",
      "Category Insight", "Performance Benchmarks",
      "Channel Strategy", "Roadmap",
    ],
  },
  {
    n: "002",
    t: "Implementation",
    strap: "Built to perform from day one.",
    desc: "We build the storefront, the content, and the operational layer underneath — Shopify stores, Lazada launches, Amazon presence, the workflows that run them. Each build is set up so day-one performance is measurable and day-two operations are already automated.",
    caps: [
      "E‑commerce Store Build", "Marketplace Launch",
      "Listing & PDP Content", "Bundle & Catalog Setup",
      "Store Decoration", "Workflow Automation",
    ],
  },
  {
    n: "003",
    t: "Operations",
    strap: "Running the channel, week after week.",
    desc: "We don't hand the keys back. As your embedded e‑commerce team, we run the systems we built — managing daily performance, reporting like an operator, and making the decisions a channel owner would make. Every week.",
    caps: [
      "Daily Marketplace Management", "Order & Customer Service",
      "Listing & Content Optimization", "Promotional Planning",
      "Weekly Performance Tracking", "Monthly Operator Reviews",
    ],
  },
];

function Stages() {
  const [active, setActive] = React.useState(0);
  const s = STAGES[active];
  return (
    <section className="section section--ink" id="capabilities" data-screen-label="03 Stages">
      <div className="shell">
        <div className="stages__head">
          <div>
            <div className="eyebrow eyebrow--on-dark">What We Do</div>
            <h2>
              The three stages of <span className="accent">working with us</span>.
            </h2>
          </div>
          <p className="sub">
            Engagements typically run the full arc — from research through to running the channel. Most clients start at one stage and grow into the next. Click a stage to explore.
          </p>
        </div>

        <div className="stages__rail" role="tablist">
          {STAGES.map((stage, i) => (
            <button
              key={stage.n}
              role="tab"
              aria-selected={i === active}
              className={"tab" + (i === active ? " is-active" : "")}
              onClick={() => setActive(i)}
            >
              <span className="n">{stage.n}</span>
              <span className="t">{stage.t}.</span>
            </button>
          ))}
        </div>

        <div className="stages__panel" key={active}>
          <div className="stages__panel-left">
            <div className="big-n">{s.n}</div>
            <div className="strap">{s.strap}</div>
          </div>
          <div className="stages__panel-right">
            <p className="desc">{s.desc}</p>
            <div className="caps-title">What's included</div>
            <div className="caps">
              {s.caps.map(c => (
                <div className="cap" key={c}>
                  <span className="dot"></span>
                  {c}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Stages = Stages;