var About = function (props) {
  var navigate = props.navigate;
  var _state = React.useState(null);
  var page = _state[0], setPage = _state[1];
  var _loading = React.useState(true);
  var loading = _loading[0], setLoading = _loading[1];

  React.useEffect(function () {
    var ghost = window.IBA_GHOST;
    if (!ghost) { setLoading(false); return; }

    ghost.getPage('about').then(function (data) {
      if (data.pages && data.pages[0]) {
        setPage(data.pages[0]);
      }
      setLoading(false);
    }).catch(function () { setLoading(false); });
  }, []);

  if (loading) {
    return (
      <div className="ib-post-loading">
        <span style={{ color: 'var(--amber)' }}>$</span> loading about...<br/>
        <span className="ib-caret"></span>
      </div>
    );
  }

  if (!page) {
    return (
      <div className="ib-post-page">
        <div className="ib-post-header">
          <h1 className="ib-post-header-title">About</h1>
        </div>
        <div className="ib-post-body">
          <p>We build things with AI. Then we break them on purpose.</p>
          <p>itsbroken.ai is an AI security research lab transmitting from Iowa. We publish field notes on red-teaming, kill chains, prompt injection, and the sound things make when they fail.</p>
          <p>Founded by Pete McKernan and the Cipher Circle, est. 2026.</p>
        </div>
      </div>
    );
  }

  return (
    <div className="ib-post-page">
      <div className="ib-post-header">
        <h1 className="ib-post-header-title">{page.title}</h1>
      </div>
      {page.feature_image && (
        <div className="ib-post-feature-image">
          <img src={page.feature_image} alt={page.feature_image_alt || page.title} />
        </div>
      )}
      <div className="ib-post-body" dangerouslySetInnerHTML={{ __html: page.html }}></div>
    </div>
  );
};

window.About = About;