// Colosseum.jsx — Coming soon landing page
var COLOSSEUM_LINES = [
  { type: 'cmd', text: '$ colosseum --status' },
  { type: 'comment', text: '# C0losseum Training Arena' },
  { type: 'line', label: 'environment', value: 'staging', color: 'amber' },
  { type: 'line', label: 'cartridges active', value: '5', color: 'amber' },
  { type: 'line', label: 'levels active', value: '33', color: 'amber' },
  { type: 'line', label: 'cartridges pending', value: '13', color: 'warn' },
  { type: 'line', label: 'difficulty tiers', value: '6', color: 'amber' },
  { type: 'line', label: 'leaderboard', value: 'active', color: 'success' },
  { type: 'line', label: 'public access', value: 'locked', color: 'error' },
  { type: 'comment-gap', text: '# awaiting deployment clearance...' },
  { type: 'cursor' },
];

var Colosseum = function (props) {
  var navigate = props.navigate;
  var onSubscribe = props.onSubscribe;

  var _visible = React.useState(1);
  var visible = _visible[0], setVisible = _visible[1];

  React.useEffect(function () {
    if (visible >= COLOSSEUM_LINES.length) return;
    var delay = visible === 1 ? 600 : 400 + Math.floor(Math.random() * 200);
    var id = setTimeout(function () {
      setVisible(visible + 1);
    }, delay);
    return function () { clearTimeout(id); };
  }, [visible]);

  var containerStyle = {
    minHeight: '70vh',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    padding: '60px 28px',
    textAlign: 'center',
    position: 'relative',
    overflow: 'hidden',
  };

  var gridOverlayStyle = {
    position: 'absolute', inset: 0, pointerEvents: 'none',
    backgroundImage: 'linear-gradient(rgba(212,168,75,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(212,168,75,0.03) 1px, transparent 1px)',
    backgroundSize: '40px 40px',
    opacity: 0.6,
  };

  var eyebrowStyle = {
    fontFamily: 'var(--font-mono)', fontSize: '12px', letterSpacing: '0.2em',
    color: 'var(--amber)', textTransform: 'uppercase', marginBottom: '16px',
  };

  var titleStyle = {
    fontFamily: 'var(--font-display)',
    fontSize: 'clamp(36px, 9vw, 88px)', fontWeight: 400,
    color: 'var(--text)', letterSpacing: '0.04em', lineHeight: 0.95,
    margin: '0 0 8px', textTransform: 'uppercase',
  };

  var subtitleStyle = {
    fontFamily: 'var(--font-mono)', fontSize: '15px',
    color: 'var(--text-2)', letterSpacing: '0.06em',
    maxWidth: '520px', lineHeight: 1.6, margin: '0 auto 40px',
  };

  var terminalStyle = {
    background: 'var(--bg-2)', border: '1px solid var(--border)',
    padding: '24px 32px', maxWidth: '560px', width: '100%',
    textAlign: 'left', fontFamily: 'var(--font-mono)', fontSize: '13px',
    color: 'var(--text-2)', lineHeight: 1.8, marginBottom: '40px',
    minHeight: '310px',
  };

  var promptColor = { color: 'var(--amber)' };
  var commentColor = { color: 'var(--text-muted)' };
  var successColor = { color: '#00FF41' };
  var warnColor = { color: '#FFAA00' };
  var errorColor = { color: '#FF4444' };
  var valueColor = { color: 'var(--amber)' };

  var dividerStyle = {
    width: '60px', height: '1px', background: 'var(--amber-dim)',
    margin: '0 auto 32px',
  };

  var featureGridStyle = {
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
    gap: '16px', maxWidth: '640px', width: '100%', marginBottom: '48px',
  };

  var featureStyle = {
    border: '1px solid var(--border)', padding: '20px 16px',
    background: 'var(--bg-2)', textAlign: 'center',
  };

  var featureIconStyle = {
    fontFamily: 'var(--font-mono)', color: 'var(--amber)',
    fontSize: '20px', letterSpacing: '0.1em', marginBottom: '8px',
  };
  var featureLabelStyle = {
    fontFamily: 'var(--font-mono)', fontSize: '12px', fontWeight: 700,
    letterSpacing: '0.1em', textTransform: 'uppercase',
    color: 'var(--text)',
  };
  var featureDescStyle = {
    fontFamily: 'var(--font-mono)', fontSize: '11px',
    color: 'var(--text-muted)', marginTop: '6px', lineHeight: 1.4,
  };

  var ctaStyle = {
    display: 'inline-block',
    background: 'var(--amber)', color: 'var(--bg)',
    padding: '14px 28px', border: 'none',
    fontFamily: 'var(--font-mono)', fontSize: '13px', fontWeight: 700,
    letterSpacing: '0.12em', textTransform: 'uppercase',
    cursor: 'pointer', textDecoration: 'none',
    transition: 'background .2s',
  };

  var handleSubscribeClick = function (e) {
    e.preventDefault();
    if (onSubscribe) {
      onSubscribe();
    } else {
      var el = document.querySelector('.ib-cta');
      if (el) el.scrollIntoView({ behavior: 'smooth' });
    }
  };

  return (
    <div style={containerStyle}>
      <div style={gridOverlayStyle}></div>

      <div style={eyebrowStyle}>
        <span style={{ color: 'var(--amber-dim)' }}>{'>'}</span> initializing training environment...
      </div>

      <h1 className="ib-colosseum-title" style={titleStyle}>C<span className="ib-colosseum-zero">0</span>LOSSEUM</h1>

      <div style={subtitleStyle}>
        AI red team prompt injection arena. Prove your skills against real AI defenses.
        Break the model. Capture the flag.
        And most importantly, have fun.
      </div>

      <div style={dividerStyle}></div>

      <div style={terminalStyle}>
        {COLOSSEUM_LINES.map(function (line, i) {
          if (i >= visible) return null;
          var isNew = i === visible - 1 && i > 0;
          var cls = isNew ? 'ib-tail-fadein' : '';
          var colorMap = {
            amber: valueColor,
            warn: warnColor,
            success: successColor,
            error: errorColor,
          };
          if (line.type === 'cmd') {
            return React.createElement('div', { key: i, className: cls },
              React.createElement('span', { style: promptColor }, '$'),
              ' colosseum --status'
            );
          }
          if (line.type === 'comment') {
            return React.createElement('div', { key: i, className: cls, style: commentColor }, line.text);
          }
          if (line.type === 'comment-gap') {
            return React.createElement('div', { key: i, className: cls, style: Object.assign({}, commentColor, { marginTop: '12px' }) }, line.text);
          }
          if (line.type === 'cursor') {
            return React.createElement('div', { key: i, className: cls, style: { marginTop: '4px' } },
              React.createElement('span', { style: promptColor }, '$'),
              ' ',
              React.createElement('span', { className: 'ib-caret' })
            );
          }
          return React.createElement('div', { key: i, className: cls },
            React.createElement('span', { style: promptColor }, '>'),
            ' ' + line.label + ': ',
            React.createElement('span', { style: colorMap[line.color] || valueColor }, line.value)
          );
        })}
      </div>

      <div style={featureGridStyle}>
        <div style={featureStyle}>
          <div style={featureIconStyle}>[CTG]</div>
          <div style={featureLabelStyle}>Cartridges</div>
          <div style={featureDescStyle}>Tiered AI security challenges</div>
        </div>
        <div style={featureStyle}>
          <div style={featureIconStyle}>[RNK]</div>
          <div style={featureLabelStyle}>Leaderboard</div>
          <div style={featureDescStyle}>Rank against other operators</div>
        </div>
        <div style={featureStyle}>
          <div style={featureIconStyle}>[ACH]</div>
          <div style={featureLabelStyle}>Achievements</div>
          <div style={featureDescStyle}>Earn badges and cosmetics</div>
        </div>
      </div>

      <a href="#" style={ctaStyle} onClick={handleSubscribeClick}
        onMouseEnter={function (e) { e.currentTarget.style.background = 'var(--deep-amber)'; }}
        onMouseLeave={function (e) { e.currentTarget.style.background = 'var(--amber)'; }}
      >
        Subscribe for Launch Notification
      </a>

      <div style={{ fontFamily: 'var(--font-mono)', fontSize: '11px', color: 'var(--text-muted)', marginTop: '16px', letterSpacing: '0.06em' }}>
        Sign up to get notified when the arena opens
      </div>
    </div>
  );
};

window.Colosseum = Colosseum;