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

function SecurityHomePage() {
  // 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="security">
      <div className="panel-card">
        <div className="page">

          <div className="panel-card__head">
            <h2 className="h2 panel-card__title">Protected data, proven controls</h2>
            <p className="lead panel-card__lead">
              At some point a question has to reach a model. That crossing is where your data
              would leave your control, so it is where we concentrate: identifying details are
              replaced before anything is sent. Everything the system does is recorded as it
              happens, so you can show a regulator exactly what ran and what it saw.
            </p>
          </div>

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