/* global React, DiagramOntology */
// OntologyHomePage: Panel 1 of the homepage story: the structured model of the firm.
//
// This file is the panel shell only: heading, paragraph and Learn more.
// The diagram lives in components/DiagramOntology.jsx (loaded by its own
// script tag), so it can be replaced without touching this file.
// Logos are served from /logos/.

function OntologyHomePage() {
  // Placeholder until the dedicated page exists: swap in its path, e.g. '/how-it-thinks'.
  const LEARN_MORE_HREF = '#';
  const onLearnMore = (e) => { if (LEARN_MORE_HREF === '#') e.preventDefault(); };

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

          <div className="panel-card__head">
            <h2 className="h2 panel-card__title">Full understanding of your business</h2>
            <p className="lead panel-card__lead">
              A general AI assistant can read your documents, but it does not know how
              they fit together: which clients hold which products, who is responsible
              for what, and which rules apply to whom. We build a structured model of
              your firm first, an ontology, so the system reasons from how your business
              actually works.
            </p>
          </div>

          <div className="panel-card__figure">
            <DiagramOntology 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.OntologyHomePage = OntologyHomePage;