/* global React */
function Operate() {
  const ops = [
  { time: "09:42", title: "Restocked low inventory · Matcha 30g tin", sub: "Detected 3 days of supply remaining. Drafted a 240-unit reorder from Kanbayashi — awaiting your one-tap approval.", status: "review", code: "draft" },
  { time: "10:18", title: "Launched email — 'Spring harvest is here'", sub: "Wrote, designed, and sent to 1,420 subscribers using your tone guide. Open rate trending 38%.", status: "done", code: "auto" },
  { time: "11:04", title: "Suggested two checkout copy variants", sub: "You approved variant B yesterday. It is now live, +6.2% on cart→pay.", status: "live", code: "exp" },
  { time: "12:30", title: "Fulfilled 84 orders · created shipping labels", sub: "USPS Priority for 71. DHL Express for 13 international. Customers notified in your voice.", status: "done", code: "auto" },
  { time: "14:12", title: "Drafted replies to 12 customer questions", sub: "11 auto-sent (matching tone). 1 escalated to you — a refund edge case worth a human eye.", status: "done", code: "auto" },
  { time: "15:05", title: "Optimizing ad spend on Meta", sub: "Paused 2 underperforming creatives. Recommending $84 reallocation — confirm to proceed.", status: "review", code: "draft" }];


  return (
    <section className="section operate-light" id="operate" style={{ padding: "120px 8px 120px 0px", margin: "0px", borderRadius: "20px", position: "relative", overflow: "hidden" }}>
      <div className="operate-bg" />
      <div className="wrap" style={{ position: "relative", zIndex: 1 }}>
        <div className="section-head">
          <span className="eyebrow"><span className="num" style={{ color: "rgb(0, 0, 0)" }}>02 ——</span> Your operator</span>
          <h2>
            Launch is day one.<br />
            <span className="accent">Dispatch runs the next thousand.</span>
          </h2>
          <p className="lede">
            Other platforms give you a dashboard. Dispatch handles inventory, fulfillment,
            support, growth, and creative — and only brings the decisions that matter back
            to you. You set the direction. It does the work.
          </p>
        </div>

        <div className="operate-grid">
          <div className="panel glass-card">
            <div className="head">
              <span>Activity · today</span>
              <span className="badge"><span className="pulse" /> 4 pending review</span>
            </div>
            <div className="op-list">
              {ops.map((o, i) =>
              <div className="op-item" key={i}>
                  <div className="op-time">{o.time}</div>
                  <div>
                    <div className="op-title">{o.title}</div>
                    <div className="op-sub">{o.sub}</div>
                  </div>
                  <div className={"op-status " + (o.status === "done" ? "done" : "")}>
                    <span className="ck">{o.status === "done" ? "✓" : o.status === "review" ? "·" : "·"}</span>
                    {o.status === "done" ? "done" : o.status === "review" ? "review" : "live"}
                  </div>
                </div>
              )}
            </div>
          </div>

          {/* Chat panel — operator interactions */}
          <div className="panel glass-card" style={{ display: "flex", flexDirection: "column" }}>
            <div className="head">
              <span>Operator · prompt</span>
              <span style={{ display: "inline-flex", gap: 6, alignItems: "center" }}>
                <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--ember)" }} /> ujimatcha.shop
              </span>
            </div>

            <div className="op-chat" style={{ flex: 1 }}>
              <div className="op-msg user">
                <span className="av">JS</span>
                <div className="body">Launch a 15% off campaign for first-time subscribers, send tonight at 7pm local.</div>
              </div>
              <div className="op-msg ai">
                <span className="av"><Sparkle size={11} /></span>
                <div className="body">Drafted. Banner on storefront, two email variants, paid push on Meta + Reddit, code SPRING15 with new-customer guard. Scheduled for 7:00pm in each customer's timezone. Want to preview the emails before they go out?</div>
              </div>
              <div className="op-msg user">
                <span className="av">JS</span>
                <div className="body">Yes — send me the previews. And extend the campaign 24h if open rate is under 25% by 9pm.</div>
              </div>
              <div className="op-msg ai">
                <span className="av"><Sparkle size={11} /></span>
                <div className="body">
                  <div>Got it. Previews are in your inbox. I'll watch the open rate and check in before extending — you'll have final say.</div>
                  <div style={{ marginTop: 10, border: "1px solid var(--hairline)", borderRadius: 10, padding: "10px 12px", display: "flex", alignItems: "center", justifyContent: "space-between", background: "rgba(255,255,255,0.55)", backdropFilter: "blur(12px)", WebkitBackdropFilter: "blur(12px)" }}>
                    <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
                      <span style={{ fontFamily: "Geist Mono, monospace", fontSize: 10, color: "var(--ink-4)", letterSpacing: "0.12em", textTransform: "uppercase" }}>Campaign · spring-15</span>
                      <span style={{ fontSize: 13, color: "var(--ink)", fontWeight: 500 }}>3 surfaces · 2 emails · 1 banner</span>
                    </div>
                    <span style={{ fontFamily: "Geist Mono, monospace", fontSize: 11, color: "var(--ink-3)" }}>scheduled · 7:00pm</span>
                  </div>
                </div>
              </div>

              <div style={{ marginTop: "auto", paddingTop: 16 }}>
                <div className="chatbar">
                  <textarea rows={1} placeholder="Ask Dispatch to do something…" style={{ minHeight: 28 }} spellCheck={false} />
                  <div className="row">
                    <span className="chip">+ context</span>
                    <button className="send" aria-label="Send"><SendIcon /></button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

window.Operate = Operate;