/* Ez Studio – Ez Runner mini card (dark, yellow-neon accent) */
/* eslint-disable */

const ER = {
  ink: '#0a0a0a',
  bg2: '#0e0d10',
  border: 'rgba(255,255,255,0.08)',
  borderHi: 'rgba(212,255,0,0.32)',
  fg: '#f6f4ef',
  fg2: 'rgba(246,244,239,0.62)',
  fg3: 'rgba(246,244,239,0.4)',
  yellow: '#d4ff00',
  yellowSoft: 'rgba(212,255,0,0.12)',
};

function ERChip({ children }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      height: 22, padding: '0 9px',
      border: `1px solid ${ER.border}`,
      borderRadius: 999,
      fontFamily: 'JetBrains Mono, monospace',
      fontSize: 9, letterSpacing: '0.1em', textTransform: 'uppercase',
      color: ER.fg2, background: 'rgba(255,255,255,0.02)',
    }}>
      <span style={{
        width: 4, height: 4, borderRadius: 999,
        background: ER.yellow, boxShadow: `0 0 6px ${ER.yellow}`,
      }}/>
      {children}
    </span>
  );
}

function EzRunnerCard({ T, compact = false }) {
  const r = T.er;
  return (
    <a
      href={`ez-runner.html?lang=${(typeof window !== 'undefined' && window.__ezLang) || 'pt'}`}
      style={{ display: 'block', textDecoration: 'none', color: 'inherit' }}
      onMouseEnter={(e) => {
        const card = e.currentTarget.firstChild;
        card.style.borderColor = ER.borderHi;
        card.style.transform = 'translateY(-2px)';
      }}
      onMouseLeave={(e) => {
        const card = e.currentTarget.firstChild;
        card.style.borderColor = ER.border;
        card.style.transform = 'translateY(0)';
      }}
    >
      <div style={{
        position: 'relative',
        background: `radial-gradient(140% 100% at 100% 0%, rgba(212,255,0,0.08) 0%, rgba(212,255,0,0) 50%), ${ER.ink}`,
        border: `1px solid ${ER.border}`,
        borderRadius: 14,
        padding: compact ? '18px 20px' : '22px 22px',
        color: ER.fg,
        fontFamily: 'Inter, sans-serif',
        overflow: 'hidden',
        boxShadow: '0 1px 0 rgba(255,255,255,0.04) inset, 0 18px 40px -20px rgba(0,0,0,0.55)',
        transition: 'transform 0.25s cubic-bezier(0.2,0,0,1), border-color 0.25s',
        cursor: 'pointer',
        minHeight: compact ? undefined : 240,
        display: 'flex', flexDirection: 'column', gap: 14,
      }}>
        {/* Header: icon + name + status */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{
              width: 46, height: 46, borderRadius: 11, overflow: 'hidden',
              border: `1px solid ${ER.border}`,
              boxShadow: `0 12px 24px -10px rgba(0,0,0,0.6), 0 0 24px -6px rgba(212,255,0,0.2)`,
              flexShrink: 0,
            }}>
              <img src="assets/ez-runner.png" alt="Ez Runner" style={{ width: '100%', height: '100%', display: 'block' }}/>
            </div>
            <div>
              <div style={{ fontSize: 15, fontWeight: 500, color: ER.fg, letterSpacing: '-0.01em' }}>{r.title}</div>
              <div style={{
                fontFamily: 'JetBrains Mono, monospace', fontSize: 9,
                letterSpacing: '0.2em', textTransform: 'uppercase',
                color: ER.yellow, marginTop: 3,
              }}>{r.kind}</div>
            </div>
          </div>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 5,
            fontSize: 9, fontFamily: 'JetBrains Mono, monospace',
            color: ER.fg3, letterSpacing: '0.14em', textTransform: 'uppercase',
            whiteSpace: 'nowrap',
          }}>
            <span style={{
              width: 5, height: 5, borderRadius: 999,
              background: ER.yellow, boxShadow: `0 0 8px ${ER.yellow}`,
            }}/>
            {r.status}
          </span>
        </div>

        {/* Tagline */}
        <div style={{ fontSize: 14, fontWeight: 500, color: ER.fg, letterSpacing: '-0.005em', lineHeight: 1.3 }}>
          {r.tagline}
        </div>

        {/* Description */}
        <p style={{ fontSize: 12, color: ER.fg2, lineHeight: 1.55, margin: 0 }}>
          {r.desc}
        </p>

        {/* Chips */}
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 'auto' }}>
          {r.chips.map((c) => <ERChip key={c}>{c}</ERChip>)}
        </div>
      </div>
    </a>
  );
}

Object.assign(window, { EzRunnerCard, ERChip, ER });