/* EOMA landing v3 · Weekly Actions Kanban band (§5)
   Navy chapter card with left-column copy + right-column live Kanban board.
   Three columns (TO DO / IN PROGRESS / DONE) with AUTHORITY/CONTENT/TECHNICAL color tags.
   Stagger fade-in on viewport intersect.
*/

function KanbanBand() {
  const fx = window.KANBAN_FIXTURE;
  const [ref, inView] = window.useInView(0.18);

  return (
    <section id="execution" className="chapter" ref={ref}>
      <div className="chapter-card">
        <div className="chapter-grid">
          {/* Left column copy */}
          <div>
            <span className="eyebrow on-navy">
              <span className="dot dot-yellow" />
              <span>What you log in to</span>
            </span>
            <h2 className="chapter-h2">
              Most AI-visibility tools tell you what's broken.
              <br />
              <span className="yellow">EOMA fixes it for you.</span>
            </h2>
            <p className="chapter-sub">
              Every Monday, EOMA picks 5 high-leverage actions for your brand. You click "Do this
              for me" on anything we should handle. We plug into your WordPress and dev tools and
              ship the work directly. The things you'd rather do yourself stay in a self-serve list
              — no pressure.
            </p>
            <div className="chapter-cta">
              <a href="/signup" className="btn btn-indigo">
                <window.LogoBadge size={22} />
                <span>Start free trial</span>
              </a>
            </div>
            <p className="chapter-foot">Cancel anytime in the dashboard. No call to cancel.</p>
          </div>

          {/* Right column — Kanban board */}
          <div
            className={`kanban-board ${inView ? "is-in" : ""}`}
            aria-label="Weekly actions Kanban"
          >
            <div className="kanban-title-row">
              <div>
                <div className="kanban-title">Weekly actions</div>
                <div className="kanban-sub">
                  EOMA picks 5 high-leverage actions for your brand each week.
                </div>
              </div>
            </div>

            <div className="kanban-banner">
              <span className="kanban-banner-icon" aria-hidden="true">
                <window.Icon name="info" size={14} />
              </span>
              <span>
                <strong>
                  {fx.banner.split(" to ")[0]} to {fx.banner.split(" to ")[1]}
                </strong>
              </span>
              <span className="kanban-banner-cta">{fx.bannerCta} →</span>
            </div>

            <div className="kanban-progress">
              <span>
                EOMA is working on <strong className="tabular">{fx.activeSlots.working}</strong> of{" "}
                {fx.activeSlots.total} active slots
              </span>
              <span className="dots" aria-hidden="true">
                <span />
                <span />
                <span />
              </span>
              <span style={{ color: "var(--ink-faint)", fontStyle: "italic" }}>
                New starts paused
              </span>
            </div>

            <div className="kanban-cols">
              <KbCol
                title="To do"
                count={fx.toDo.length}
                cards={fx.toDo.slice(0, 2)}
                status="todo"
                inView={inView}
                delayStart={400}
              />
              <KbCol
                title="In progress"
                count={fx.inProgress.length}
                cards={fx.inProgress.slice(0, 2)}
                status="progress"
                inView={inView}
                delayStart={700}
                showEta
              />
              <KbCol
                title="Done"
                count={fx.done.length}
                cards={fx.done}
                status="done"
                inView={inView}
                delayStart={1000}
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function KbCol({ title, count, cards, status, inView, delayStart, showEta }) {
  return (
    <div className={`kanban-col ${status}`}>
      <div className="kanban-col-head">
        <span>{title}</span>
        <span className="ct">{count}</span>
      </div>
      {cards.map((c, i) => (
        <article
          key={i}
          className={`kanban-card ${c.tag.toLowerCase()}`}
          style={{ transitionDelay: inView ? delayStart + i * 100 + "ms" : "0ms" }}
        >
          <div className="kanban-card-meta">
            <span className="kanban-tag">{c.tag}</span>
            <span className="kanban-dur">{c.duration}</span>
          </div>
          <div className="kanban-card-title">{c.title}</div>
          {showEta && c.eta ? <div className="kanban-card-eta">{c.eta}</div> : null}
        </article>
      ))}
    </div>
  );
}

Object.assign(window, { KanbanBand });