/* global React, Eyebrow */

const CAPS = [
  { title: 'Multi-Exchange', body: '48 connectors: crypto CEX/DEX, stocks, forex, prediction markets.' },
  { title: 'Real-Time Data', body: 'WebSocket streams with <1ms processing latency.' },
  { title: '480+ Indicators', body: '22 categories: momentum, volatility, Kalman, chaos, regression, signal processing.' },
  { title: 'Custom Layouts', body: 'Split panels, multiple windows, persistent presets.' },
  { title: 'Alert System', body: 'Price alerts with Telegram delivery.' },
  { title: 'API Access', body: 'Local agent API for algorithmic trading integration.' },
];

const CapCard = ({ title, body }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: 'relative',
        background: hover ? 'rgba(33,88,164,0.08)' : 'rgba(33,88,164,0.04)',
        border: `1px solid ${hover ? 'rgba(33,88,164,0.25)' : 'rgba(254,255,238,0.07)'}`,
        borderRadius: 10,
        padding: '28px 16px 20px',
        transition: 'border-color .2s, background .2s',
      }}
    >
      <div
        style={{
          width: 10, height: 10, borderRadius: '50%',
          background: 'var(--mlc-gold)',
          position: 'absolute', top: 26, left: 20,
        }}
      />
      <h3
        style={{
          fontSize: 14, fontWeight: 600, color: 'var(--mlc-cream)',
          margin: '20px 0 8px', letterSpacing: '-0.01em',
        }}
      >
        {title}
      </h3>
      <p
        style={{
          fontSize: 12, fontWeight: 400,
          color: 'rgba(254,255,238,0.38)', lineHeight: 1.55, margin: 0,
        }}
      >
        {body}
      </p>
    </div>
  );
};

const Capabilities = () => (
  <section
    id="capabilities"
    data-screen-label="04 Capabilities"
    style={{ padding: '80px 32px', position: 'relative', zIndex: 1 }}
  >
    <div style={{ maxWidth: 1080, margin: '0 auto' }}>
      <Eyebrow style={{ textAlign: 'center' }}>Capabilities</Eyebrow>
      <h2 style={{
        fontSize: 42, fontWeight: 700, lineHeight: 1.15,
        letterSpacing: '-0.02em', color: 'var(--mlc-cream)',
        textAlign: 'center', margin: '0 0 40px',
      }}>
        Everything you need
      </h2>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 16,
        }}
      >
        {CAPS.map((c) => <CapCard key={c.title} {...c} />)}
      </div>
    </div>
  </section>
);

window.Capabilities = Capabilities;