/* global React, DiagramAgents */
// WorkflowHomePage: Panel 3 of the homepage story: the agent that does the check.
//
// This file is the panel shell only: heading, paragraph and Learn more.
// The diagram lives in components/DiagramAgents.jsx (loaded by its own
// script tag), so it can be replaced without touching this file.
// Logos are served from /logos/.

function WorkflowHomePage() {
  // Placeholder until the dedicated page exists: swap in its path.
  const LEARN_MORE_HREF = '#';
  const onLearnMore = (e) => { if (LEARN_MORE_HREF === '#') e.preventDefault(); };

  return (
    <section className="section" id="workflows">
      <div className="panel-card">
        <div className="page">

          <div className="panel-card__head">
            <h2 className="h2 panel-card__title">Agents built for your workflows</h2>
            <p className="lead panel-card__lead">
              Each agent is built for one defined workflow rather than as a general assistant.
              That is deliberate. An agent with a defined task, defined inputs and defined
              permissions is more reliable at that task, and we can show it: it is tested against
              examples of your own work before it goes live, and it cannot act beyond what you have
              approved. A general assistant cannot be held to that standard.
            </p>
          </div>

          <div className="panel-card__figure">
            <DiagramAgents logoBase="/logos" bare />
          </div>

          <div className="panel-card__more">
            <a href={LEARN_MORE_HREF} className="panel-card__more-link" onClick={onLearnMore}>
              Learn more
              <span className="panel-card__more-arrow" aria-hidden="true">
                <svg viewBox="0 0 24 12" fill="none" width="26" height="13">
                  <line x1="0" y1="6" x2="20" y2="6" stroke="currentColor" strokeWidth="1.4" />
                  <path d="M15 1.5 L20 6 L15 10.5" stroke="currentColor" strokeWidth="1.4" fill="none" />
                </svg>
              </span>
            </a>
          </div>

        </div>
      </div>
    </section>
  );
}

window.WorkflowHomePage = WorkflowHomePage;