/* EOMA landing v3.1 · Three verbs (§4)
   MEASURE → COMPARE → EXECUTE — the monitoring-to-execution narrative.
   This is the single best place to land the differentiator: every other
   AI-visibility tool stops at MEASURE; EOMA is the only one that closes
   the loop with EXECUTE. */

function ThreeVerbs() {
  return (
    <section className="verbs-section" id="how">
      <div className="verbs-head">
        <span className="eyebrow">
          <span className="dot dot-indigo" />
          <span>From monitoring to execution</span>
        </span>
        <h2 className="t-display-lg">Three steps. None of them require a developer.</h2>
        <p className="verbs-sub">
          Every other AI-visibility tool stops after step one. EOMA is the only one that ships the
          work that changes who AI recommends next time.
        </p>
      </div>

      <div className="verbs-grid">
        {/* MEASURE */}
        <article className="verb-card">
          <span className="verb-icon" aria-hidden="true">
            <window.Icon name="target" size={22} />
          </span>
          <span className="verb-name">1 · Measure</span>
          <h3 className="verb-h">Your AI presence, scored.</h3>
          <p className="verb-body">
            EOMA watches ChatGPT, Perplexity, Gemini, Claude and Google AI for every buyer question
            in your category — every week. You see exactly when your brand is named, and when a
            competitor is.
          </p>
          <div className="verb-proof">
            <span className="tabular">471 of 861</span> questions checked · 4 AI engines
          </div>
        </article>

        {/* COMPARE */}
        <article className="verb-card">
          <span className="verb-icon" aria-hidden="true">
            <window.Icon name="share" size={22} />
          </span>
          <span className="verb-name">2 · Compare</span>
          <h3 className="verb-h">Your share, your gaps, your industry.</h3>
          <p className="verb-body">
            We benchmark you against every competitor in your category, surface the high-volume
            questions you're invisible on, and add real-world industry context — so the picture is
            always your category, never a generic chart.
          </p>
          <div className="verb-proof">
            <span className="tabular">#2</span> of 13 in your category ·{" "}
            <span className="tabular">+18</span> citation gaps identified
          </div>
        </article>

        {/* EXECUTE */}
        <article className="verb-card is-execute">
          <span className="verb-icon" aria-hidden="true">
            <window.Icon name="spark" size={22} />
          </span>
          <span className="verb-name">3 · Execute</span>
          <h3 className="verb-h">Agents ship the work.</h3>
          <p className="verb-body">
            Connect your website + social once. Our agents draft the content, file the schema,
            publish to your CMS, and post to the social platforms that move the answer — all from
            one approval, end to end.
          </p>
          <div className="verb-proof">
            <div className="verb-logos">
              <span>WordPress</span>
              <span>Webflow</span>
              <span>GitHub</span>
              <span>Shopify</span>
              <span>X</span>
              <span>LinkedIn</span>
              <span>Instagram</span>
              <span>+ more</span>
            </div>
          </div>
        </article>
      </div>
    </section>
  );
}

Object.assign(window, { ThreeVerbs });