/* global React, Eyebrow */

// Small up-trend icon circle, matches SVG in the landing.
const TrendCircle = () => (
  <div style={{ flex: '0 0 auto' }}>
    <svg width="36" height="36" viewBox="0 0 36 36" fill="none" aria-hidden>
      <circle cx="18" cy="18" r="18" fill="rgba(33,88,164,0.15)" stroke="rgba(33,88,164,0.35)" strokeWidth="1" />
      <polyline
        points="11,22 16,16 20,20 25,13"
        stroke="var(--mlc-gold)"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
        fill="none"
      />
    </svg>
  </div>
);

const MARKETING_FEATURES = [
  {
    title: '480+ Indicators',
    body: 'From classic RSI and MACD to Kalman filters, signal processing, and chaos theory — the deepest indicator library available.',
  },
  {
    title: '48 Exchanges',
    body: 'Crypto, stocks, forex, and prediction markets. 28 exchanges work instantly without API keys.',
  },
  {
    title: '100% Free',
    body: 'No subscriptions, no paywalls, no feature locks. Every indicator, every exchange, every feature — completely free.',
  },
  {
    title: 'High Performance',
    body: 'Under 30 MB binary. GPU-accelerated at 200+ FPS. Multi-threaded computation keeps RAM under 400 MB and CPU around 10% — even with dozens of indicators running.',
  },
];

// Placeholder "chart" — mimics a trading terminal screenshot.
// Replace with a real screenshot by dropping it into ../../assets/.
const ChartPlaceholder = () => (
  <div
    style={{
      width: '100%',
      aspectRatio: '16/10',
      borderRadius: 12,
      overflow: 'hidden',
      border: '1px solid rgba(33,88,164,0.25)',
      background: 'linear-gradient(180deg, #0d1424 0%, #080d18 100%)',
      position: 'relative',
      boxShadow: '0 20px 60px -20px rgba(33,88,164,0.40)',
    }}
  >
    {/* mock chrome */}
    <div style={{
      display: 'flex', alignItems: 'center', gap: 8,
      padding: '10px 14px',
      borderBottom: '1px solid rgba(254,255,238,0.04)',
      background: 'rgba(254,255,238,0.015)',
    }}>
      <div style={{ width: 10, height: 10, borderRadius: '50%', background: 'rgba(244,205,99,0.55)' }} />
      <div style={{ width: 10, height: 10, borderRadius: '50%', background: 'rgba(254,255,238,0.15)' }} />
      <div style={{ width: 10, height: 10, borderRadius: '50%', background: 'rgba(254,255,238,0.15)' }} />
      <div style={{
        marginLeft: 12, fontFamily: 'var(--mlc-font-mono)',
        fontSize: 10, color: 'rgba(254,255,238,0.40)',
      }}>
        BTC/USDT · 1h · binance
      </div>
    </div>

    {/* mock candle chart */}
    <svg viewBox="0 0 400 220" style={{ width: '100%', height: 'calc(100% - 33px)', display: 'block' }} preserveAspectRatio="none">
      {/* grid */}
      {[0.2, 0.4, 0.6, 0.8].map((y, i) => (
        <line key={i} x1="0" x2="400" y1={220 * y} y2={220 * y}
          stroke="rgba(254,255,238,0.04)" strokeDasharray="2 4" />
      ))}
      {/* candles */}
      {Array.from({ length: 40 }).map((_, i) => {
        const x = 10 + i * 9.5;
        const open = 120 + Math.sin(i * 0.5) * 25 + (Math.random() - 0.5) * 8;
        const close = open + (Math.sin(i * 0.9 + 1) * 20) + (Math.random() - 0.5) * 10;
        const high = Math.min(open, close) - 6 - Math.random() * 8;
        const low = Math.max(open, close) + 6 + Math.random() * 8;
        const up = close < open;
        const color = up ? 'rgba(120,200,140,0.85)' : 'rgba(220,100,100,0.85)';
        const yTop = Math.min(open, close);
        const h = Math.abs(close - open) || 1;
        return (
          <g key={i}>
            <line x1={x + 3.5} x2={x + 3.5} y1={high} y2={low} stroke={color} strokeWidth="1" />
            <rect x={x} y={yTop} width="7" height={h} fill={color} />
          </g>
        );
      })}
      {/* trend line */}
      <polyline
        points={Array.from({ length: 40 }).map((_, i) => `${10 + i * 9.5 + 3.5},${140 - Math.sin(i * 0.25) * 20}`).join(' ')}
        fill="none" stroke="var(--mlc-gold)" strokeWidth="1.2" opacity="0.9"
      />
    </svg>

    {/* corner label — playful badge */}
    <div style={{
      position: 'absolute', right: 12, top: 44,
      fontFamily: 'var(--mlc-font-mono)', fontSize: 10,
      color: 'var(--mlc-gold)',
      background: 'rgba(244,205,99,0.08)',
      border: '1px solid rgba(244,205,99,0.25)',
      padding: '3px 8px', borderRadius: 4,
    }}>
      placeholder · replace with real screenshot
    </div>
  </div>
);

const Features = () => (
  <section
    id="features"
    data-screen-label="03 Features"
    style={{ padding: '100px 32px', position: 'relative', zIndex: 1 }}
  >
    <div
      style={{
        maxWidth: 1200,
        margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: '1fr 1.2fr',
        gap: 64,
        alignItems: 'center',
      }}
    >
      <div>
        <Eyebrow>Why mylittlechart</Eyebrow>
        <h2 style={{
          fontSize: 48, fontWeight: 700, lineHeight: 1.15,
          letterSpacing: '-0.02em', color: 'var(--mlc-cream)', margin: '0 0 40px',
        }}>
          Small but mighty.
        </h2>
        <div>
          {MARKETING_FEATURES.map((f, i) => (
            <div
              key={f.title}
              style={{
                display: 'flex',
                gap: 14,
                padding: '18px 0',
                borderBottom: i < MARKETING_FEATURES.length - 1 ? '1px solid rgba(254,255,238,0.06)' : 'none',
                alignItems: 'flex-start',
              }}
            >
              <TrendCircle />
              <div>
                <h3 style={{
                  fontSize: 16, fontWeight: 600, color: 'var(--mlc-cream)',
                  margin: '2px 0 6px', letterSpacing: '-0.01em',
                }}>
                  {f.title}
                </h3>
                <p style={{
                  fontSize: 14, fontWeight: 400, lineHeight: 1.6,
                  color: 'rgba(254,255,238,0.55)', margin: 0,
                }}>
                  {f.body}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
      <ChartPlaceholder />
    </div>
  </section>
);

window.Features = Features;