/* EZV Studio – EZ Atlas Invest featured card (dark premium, lime accent) */
/* eslint-disable */

const AT = {
  ink: '#0a0a0a',
  border: 'rgba(255,255,255,0.08)',
  borderHi: 'rgba(212,255,0,0.28)',
  fg: '#f6f4ef',
  fg2: 'rgba(246,244,239,0.62)',
  fg3: 'rgba(246,244,239,0.4)',
  lime: '#d4ff00',
  limeSoft: 'rgba(212,255,0,0.12)',
  green: '#22d36b',
  pos: '#4ade80',
  surface: 'rgba(255,255,255,0.02)',
};

const ATLAS_I18N = {
  pt: {
    tag: 'EM DESENVOLVIMENTO · PLATAFORMA WEB',
    live: 'Em breve',
    title: 'EZ Atlas Invest',
    desc: 'Inteligência artificial que lê o mercado para você. Milhares de indicadores, notícias e dados viram uma leitura clara e personalizada — sem sinais, sem promessas.',
    features: ['Análise por IA', '9 Scores', 'B3 + BDRs', 'Notícias', 'SEO'],
    cta: 'Conhecer a plataforma',
    heroCta: 'Conheça o EZ Atlas Invest',
    scoreLabel: 'Nota geral',
    readLabel: 'Leitura da IA',
    read: 'Forte em dividendos, valuation na média histórica.',
  },
  en: {
    tag: 'IN DEVELOPMENT · WEB PLATFORM',
    live: 'Coming soon',
    title: 'EZ Atlas Invest',
    desc: 'Artificial intelligence that reads the market for you. Thousands of indicators, news and data become a clear, personalized reading — no signals, no promises.',
    features: ['AI analysis', '9 Scores', 'B3 + BDRs', 'News', 'SEO'],
    cta: 'Explore the platform',
    heroCta: 'Meet EZ Atlas Invest',
    scoreLabel: 'Overall',
    readLabel: 'AI reading',
    read: 'Strong on dividends, valuation near its historical average.',
  },
  es: {
    tag: 'EN DESARROLLO · PLATAFORMA WEB',
    live: 'Próximamente',
    title: 'EZ Atlas Invest',
    desc: 'Inteligencia artificial que lee el mercado por ti. Miles de indicadores, noticias y datos se vuelven una lectura clara y personalizada — sin señales, sin promesas.',
    features: ['Análisis con IA', '9 Scores', 'B3 + BDRs', 'Noticias', 'SEO'],
    cta: 'Conocer la plataforma',
    heroCta: 'Conoce EZ Atlas Invest',
    scoreLabel: 'Nota general',
    readLabel: 'Lectura de la IA',
    read: 'Fuerte en dividendos, valuación cerca de su media histórica.',
  },
};

function ATChip({ children }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      height: 26, padding: '0 11px',
      border: `1px solid ${AT.border}`, borderRadius: 999,
      fontFamily: 'JetBrains Mono, monospace',
      fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase',
      color: AT.fg2, background: AT.surface,
    }}>
      <span style={{ width: 4, height: 4, borderRadius: 999, background: AT.lime, boxShadow: `0 0 6px ${AT.lime}` }}/>
      {children}
    </span>
  );
}

/* Anel de score (mini) */
function ATScoreRing({ value = 71, label }) {
  const r = 27;
  const circ = 2 * Math.PI * r;
  const off = circ - (value / 100) * circ;
  return (
    <div style={{ position: 'relative', width: 72, height: 72, flexShrink: 0 }}>
      <svg width="72" height="72" style={{ transform: 'rotate(-90deg)' }}>
        <circle cx="36" cy="36" r={r} fill="none" stroke="rgba(255,255,255,0.10)" strokeWidth="6"/>
        <circle cx="36" cy="36" r={r} fill="none" stroke={AT.lime} strokeWidth="6"
          strokeLinecap="round" strokeDasharray={circ} strokeDashoffset={off}/>
      </svg>
      <div style={{
        position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center',
      }}>
        <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 20, fontWeight: 600, color: AT.fg, lineHeight: 1 }}>{value}</span>
        <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 7, letterSpacing: '0.12em', textTransform: 'uppercase', color: AT.fg3, marginTop: 2 }}>{label}</span>
      </div>
    </div>
  );
}

function ATBar({ label, value }) {
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
        <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, color: AT.fg2 }}>{label}</span>
        <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: AT.fg, fontWeight: 500 }}>{value}</span>
      </div>
      <div style={{ height: 4, borderRadius: 999, background: 'rgba(255,255,255,0.08)', overflow: 'hidden' }}>
        <div style={{ height: '100%', width: `${value}%`, borderRadius: 999, background: value >= 70 ? AT.pos : '#fbbf24' }}/>
      </div>
    </div>
  );
}

/* Preview da plataforma (mock de leitura) */
function ATPreview({ t }) {
  return (
    <div style={{
      width: '100%', maxWidth: 330,
      border: `1px solid ${AT.border}`, borderRadius: 16,
      background: `radial-gradient(120% 90% at 100% 0%, rgba(212,255,0,0.06) 0%, rgba(212,255,0,0) 55%), rgba(255,255,255,0.02)`,
      padding: 18,
      boxShadow: '0 24px 60px -30px rgba(0,0,0,0.8)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{
            width: 38, height: 38, borderRadius: 10, background: 'rgba(255,255,255,0.05)',
            border: `1px solid ${AT.border}`, display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: 'JetBrains Mono, monospace', fontSize: 11, fontWeight: 600, color: AT.fg,
          }}>PETR</div>
          <div>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 600, color: AT.fg, lineHeight: 1.1 }}>PETR4</div>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, color: AT.fg3 }}>Petrobras</div>
          </div>
        </div>
        <span style={{
          fontFamily: 'JetBrains Mono, monospace', fontSize: 11, fontWeight: 500,
          color: AT.pos, padding: '3px 8px', borderRadius: 999,
          background: 'rgba(74,222,128,0.10)', border: '1px solid rgba(74,222,128,0.22)',
        }}>+1,12%</span>
      </div>

      <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
        <ATScoreRing value={71} label={t.scoreLabel} />
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 9 }}>
          <ATBar label="Dividendos" value={84} />
          <ATBar label="Fundamentos" value={78} />
          <ATBar label="Valuation" value={62} />
        </div>
      </div>

      <div style={{
        marginTop: 16, padding: '10px 12px', borderRadius: 10,
        border: `1px solid ${AT.border}`, background: 'rgba(255,255,255,0.02)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 5 }}>
          <span style={{
            width: 16, height: 16, borderRadius: 5, background: AT.limeSoft,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 10, color: AT.lime,
          }}>✦</span>
          <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase', color: AT.fg3 }}>{t.readLabel}</span>
        </div>
        <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, lineHeight: 1.5, color: AT.fg2, margin: 0 }}>{t.read}</p>
      </div>
    </div>
  );
}

/* Card principal (wide) — mesmo porte do EasyDriverCard */
function AtlasCard({ lang }) {
  const L = lang || (typeof window !== 'undefined' && window.__ezLang) || 'pt';
  const t = ATLAS_I18N[L] || ATLAS_I18N.pt;

  return (
    <a
      href="/ez-atlas"
      style={{ display: 'block', textDecoration: 'none', color: 'inherit' }}
      onMouseEnter={(e) => {
        e.currentTarget.firstChild.style.borderColor = AT.borderHi;
        e.currentTarget.firstChild.style.transform = 'translateY(-2px)';
      }}
      onMouseLeave={(e) => {
        e.currentTarget.firstChild.style.borderColor = AT.border;
        e.currentTarget.firstChild.style.transform = 'translateY(0)';
      }}
    >
      <div style={{
        position: 'relative',
        background: `radial-gradient(120% 80% at 0% 0%, rgba(212,255,0,0.09) 0%, rgba(212,255,0,0) 50%), ${AT.ink}`,
        border: `1px solid ${AT.border}`, borderRadius: 18,
        padding: '36px 40px', color: AT.fg, fontFamily: 'Inter, sans-serif',
        overflow: 'hidden',
        boxShadow: '0 1px 0 rgba(255,255,255,0.04) inset, 0 30px 80px -40px rgba(0,0,0,0.6)',
        transition: 'transform 0.25s cubic-bezier(0.2,0,0,1), border-color 0.25s',
        cursor: 'pointer',
      }}>
        {/* grid sutil */}
        <div style={{
          position: 'absolute', inset: 0, pointerEvents: 'none',
          backgroundImage: `linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px)`,
          backgroundSize: '32px 32px',
          maskImage: 'radial-gradient(80% 80% at 100% 100%, black 0%, transparent 70%)',
          WebkitMaskImage: 'radial-gradient(80% 80% at 100% 100%, black 0%, transparent 70%)',
        }}/>

        {/* topo: tag + live */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 28, position: 'relative' }}>
          <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: AT.lime }}>{t.tag}</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: AT.fg3 }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: '#fbbf24', boxShadow: '0 0 8px #fbbf24' }}/>
            {t.live}
          </span>
        </div>

        {/* corpo */}
        <div className="l-atlas-body" style={{
          display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 56, alignItems: 'center', position: 'relative',
        }}>
          {/* esquerda */}
          <div>
            <h3 style={{ fontFamily: 'Inter, sans-serif', fontSize: 46, fontWeight: 500, margin: 0, letterSpacing: '-0.03em', lineHeight: 1.0, color: AT.fg }}>
              {t.title}
            </h3>
            <p style={{ fontSize: 15, lineHeight: 1.65, color: AT.fg2, margin: '16px 0 22px', maxWidth: 480, fontWeight: 400 }}>{t.desc}</p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 26 }}>
              {t.features.map((f) => <ATChip key={f}>{f}</ATChip>)}
            </div>
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              height: 44, padding: '0 22px', borderRadius: 999,
              background: AT.lime, color: '#0a0a0b',
              fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 600, letterSpacing: '-0.005em',
              boxShadow: `0 0 0 1px rgba(212,255,0,0.4), 0 10px 30px -8px rgba(212,255,0,0.35)`,
            }}>
              {t.cta}
              <span aria-hidden style={{ fontSize: 14 }}>→</span>
            </span>
          </div>

          {/* direita: preview */}
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <ATPreview t={t} />
          </div>
        </div>
      </div>
    </a>
  );
}

Object.assign(window, { AtlasCard, ATLAS_I18N, AT });