var Home = function (props) {
  var navigate = props.navigate;
  var onOpen = props.onOpen;

  var _config = React.useState(null);
  var config = _config[0], setConfig = _config[1];

  var _latestPosts = React.useState([]);
  var latestPosts = _latestPosts[0], setLatestPosts = _latestPosts[1];

  var _featuredPosts = React.useState([]);
  var featuredPosts = _featuredPosts[0], setFeaturedPosts = _featuredPosts[1];

  var _settings = React.useState(null);
  var settings = _settings[0], setSettings = _settings[1];

  var ghost = window.IBA_GHOST;

  React.useEffect(function () {
    if (!ghost) return;

    ghost.getSiteConfig().then(function (cfg) { setConfig(cfg); });
    ghost.getSettings().then(function (data) { setSettings(data.settings || data); });
    ghost.getLatestPosts(15).then(function (data) { setLatestPosts(data.posts || []); });
    ghost.getFeaturedPosts().then(function (data) { setFeaturedPosts(data.posts || []); });
  }, []);

  var products = (window.IBA_PRODUCTS || []).slice(0, 4);
  var siteDesc = settings && settings.description
    ? settings.description
    : 'Field notes on AI red-teaming, kill chains, and the sound things make when they fail. Pete McKernan and the Cipher Circle, transmitting from Iowa.';

  var showTail = config ? config.show_live_tail !== false : true;
  var tailTag = config ? config.tail_tag || 'log' : 'log';

  return (
    <div style={{ maxWidth: '1280px', margin: '0 auto', padding: '0 28px' }}>
      <window.Hero navigate={navigate} config={config} siteDescription={siteDesc}>
        <window.LiveTail show={showTail} tailTag={tailTag} />
      </window.Hero>

      {featuredPosts.length > 0 && (
        <section className="ib-feed-section">
          <div className="ib-feed-header">
            <h2 className="ib-feed-title">// FEATURED</h2>
          </div>
          <div className="ib-post-head">
            <span className="ib-post-idx">IDX</span>
            <span className="ib-post-date">DATE</span>
            <span className="ib-post-tag">TAG</span>
            <span className="ib-post-title">TITLE</span>
            <span className="ib-post-author">AUTHOR</span>
          </div>
          {featuredPosts.map(function (post, i) {
            return <window.PostCard key={post.id} post={post} index={i} navigate={navigate} />;
          })}
        </section>
      )}

      <section id="latest" className="ib-feed-section">
        <div className="ib-feed-header">
          <h2 className="ib-feed-title">LATEST // $ ls -lah ./posts | head</h2>
          <a href="/blog" className="ib-feed-more" onClick={function (e) { e.preventDefault(); navigate('blog'); }}>
            VIEW ALL →
          </a>
        </div>
        <div className="ib-post-head">
          <span className="ib-post-idx">IDX</span>
          <span className="ib-post-date">DATE</span>
          <span className="ib-post-tag">TAG</span>
          <span className="ib-post-title">TITLE</span>
          <span className="ib-post-author">AUTHOR</span>
        </div>
        {latestPosts.map(function (post, i) {
          return <window.PostCard key={post.id} post={post} index={i} navigate={navigate} />;
        })}
      </section>

      {products.length > 0 && (
        <section style={{ maxWidth: '1280px', margin: '0 auto', padding: '48px 28px' }}>
          <div className="ib-feed-header">
            <h2 className="ib-feed-title">// FROM THE SHOP</h2>
            <a href="/shop" className="ib-feed-more" onClick={function (e) { e.preventDefault(); navigate('shop'); }}>
              VIEW ALL →
            </a>
          </div>
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))',
            gap: '24px',
            marginTop: '20px',
          }}>
            {products.map(function (p) {
              return <window.ProductCard key={p.id} product={p} onOpen={onOpen} />;
            })}
          </div>
        </section>
      )}

      <window.Subscribe />
    </div>
  );
};

window.Home = Home;