/* global React */

/* "What an operator-grade review looks like."
   Three habits → three claim blocks → three anonymized document
   excerpts. The artifacts are real-document-like fragments,
   redacted of any client-identifying data. */

function Block({ n, claim, line, children }) {
  return (
    <div className="engagement-block">
      <div className="engagement-block__claim">
        <div className="n">{n}</div>
        <h3>{claim}</h3>
        <p>{line}</p>
      </div>
      <div className="engagement-block__doc-wrap">
        {children}
        <div className="engagement-block__caption">
          Excerpted from a recent monthly performance review.<br/>
          Brand and identifiers redacted for client confidentiality.
        </div>
      </div>
    </div>
  );
}

/* ------------ DOC 1: Diagnostic ------------ */
function DocDiagnostic() {
  return (
    <article className="engagement-doc">
      <div className="engagement-doc__chapter">002 · Content &amp; Ranking</div>
      <h4 className="engagement-doc__title">Content quality is at the ceiling.</h4>
      <p className="engagement-doc__body">
        40 of 44 product variants at top-tier content score — 91%. No listing sits in the action-needed band. The bottleneck is no longer content; it's title keyword coverage and review velocity.
      </p>

      <div className="engagement-doc__metrics">
        <div className="m"><div className="n">44</div><div className="l">Variants Live</div></div>
        <div className="m"><div className="n">91%</div><div className="l">Top Tier</div></div>
        <div className="m"><div className="n ok">5</div><div className="l">#1 Holds</div></div>
        <div className="m"><div className="n ok">0 / 12</div><div className="l">NCP</div></div>
      </div>

      <div className="engagement-doc__verdict">
        <span className="lbl">Diagnosis</span>
        <span className="body">
          Read this as: content is solved. Move next-period investment to review acceleration and keyword expansion.
        </span>
      </div>
    </article>
  );
}

/* ------------ DOC 2: Three movements (breakthrough / durable / decay) ------------ */
function DocMovements() {
  return (
    <article className="engagement-doc">
      <div className="engagement-doc__chapter">003 · Ranking · 17-day window</div>
      <h4 className="engagement-doc__title">Three movements this period.</h4>
      <p className="engagement-doc__body">
        Single-sample spikes separated from durable wins. Visibility separated from rank position.
      </p>

      <div className="engagement-doc__movements">
        <div className="mv">
          <div className="mv__tag mv__tag--breakthrough">Breakthrough</div>
          <div className="mv__head">Category head term.</div>
          <p>Three variants now visible on the highest-volume search term in the category. Unranked at month start.</p>
        </div>
        <div className="mv">
          <div className="mv__tag mv__tag--durable">Durable wins</div>
          <div className="mv__head">Accessories + premium taps.</div>
          <p>Five keywords held #1 across all five weekly snapshots. Premium tap variants held #3 and #5 throughout.</p>
        </div>
        <div className="mv">
          <div className="mv__tag mv__tag--decay">Expected decay</div>
          <div className="mv__head">Flagship sinks.</div>
          <p>Regressed from #1 to #17–35 by period end. SKU visibility held; rank position did not.</p>
        </div>
      </div>

      <div className="engagement-doc__verdict">
        <span className="lbl">Diagnosis</span>
        <span className="body">
          The period-start spike was a single-sample event, not a stable position. The keywords that held #1 across every weekly snapshot are the genuine wins.
        </span>
      </div>
    </article>
  );
}

/* ------------ DOC 3: Forward-looking next steps ------------ */
function DocForward() {
  return (
    <article className="engagement-doc">
      <div className="engagement-doc__chapter">006 · Next month</div>
      <h4 className="engagement-doc__title">Building the backbone before volume needs it.</h4>
      <p className="engagement-doc__body">
        Current weekly cadence works. The next move is structural — automating what's manual, and instrumenting categories we don't yet track.
      </p>

      <ol className="engagement-doc__plan">
        <li>
          <span className="n">001</span>
          <span className="t">Add category head terms to weekly monitoring.</span>
          <span className="s">Kitchen sink, kitchen tap — currently untracked.</span>
        </li>
        <li>
          <span className="n">002</span>
          <span className="t">Move title rewrites onto a templated content brief.</span>
          <span className="s">Cuts rewrite turnaround from days to hours.</span>
        </li>
        <li>
          <span className="n">003</span>
          <span className="t">Configure review-velocity tracking per range.</span>
          <span className="s">Visibility into which ranges need review acceleration.</span>
        </li>
        <li>
          <span className="n">004</span>
          <span className="t">Build paid-search readiness for activation.</span>
          <span className="s">Bid strategy, keyword grouping, hand-off doc.</span>
        </li>
      </ol>

      <div className="engagement-doc__verdict">
        <span className="lbl">Diagnosis</span>
        <span className="body">
          Volume is coming. The question is whether the operating model is ready to absorb it without breaking.
        </span>
      </div>
    </article>
  );
}

function EngagementSnapshot() {
  return (
    <section className="section engagement" data-screen-label="06 Engagement Snapshot">
      <div className="shell">
        <div className="engagement__head">
          <div>
            <div className="eyebrow eyebrow--on-dark">How we report</div>
            <h2>
              What an operator-grade<br/>
              review <span className="accent">looks like</span>.
            </h2>
          </div>
          <p className="sub">
            Three habits that distinguish our reporting from typical marketplace agency output. Use them as a checklist against the monthly report you receive today.
          </p>
        </div>

        <div className="engagement__blocks">
          <Block
            n="001"
            claim="We diagnose, we don't dashboard."
            line="Numbers are framed as judgments, not data. We tell you what the data means — and what to do about it."
          >
            <DocDiagnostic />
          </Block>

          <Block
            n="002"
            claim="We label noise as noise."
            line="Single-sample spikes get called what they are. Durable wins get separated from one-time movements."
          >
            <DocMovements />
          </Block>

          <Block
            n="003"
            claim="We think forward."
            line="Every review names what's structurally next — not just what happened last month."
          >
            <DocForward />
          </Block>
        </div>
      </div>
    </section>
  );
}

window.EngagementSnapshot = EngagementSnapshot;