// Bring-your-own-key: 8 providers grid
const ProvidersSection = () => {
  // Provider names, sub-strings (model identifiers like "Claude Opus 4.7") stay
  // un-translated for two reasons: model identifiers are global brand-strings,
  // and "On-device" / "Local — anything" are short tech labels that often read
  // better in English even in non-English copy. Tag categories ARE translated.
  const TAG = {
    nokey:   t('providers.tag_nokey'),
    freekey: t('providers.tag_freekey'),
    paid:    t('providers.tag_paid'),
  };
  const providers = [
    { name: 'Apple Intelligence', sub: t('providers.sub_apple'),  tag: TAG.nokey,   color: '#0E0B14', kind: 'nokey' },
    { name: 'Ollama',             sub: t('providers.sub_ollama'), tag: TAG.nokey,   color: '#7B7BE8', kind: 'nokey' },
    { name: 'Groq',               sub: 'Llama 3.3 70B',           tag: TAG.freekey, color: '#F55036', kind: 'freekey' },
    { name: 'Google',             sub: 'Gemini 2.5 Pro',          tag: TAG.freekey, color: '#4285F4', kind: 'freekey' },
    { name: 'Anthropic',          sub: 'Claude Opus 4.7',         tag: TAG.paid,    color: '#D97757', kind: 'paid' },
    { name: 'OpenAI',             sub: 'GPT-5 / o4',              tag: TAG.paid,    color: '#0E9F6E', kind: 'paid' },
    { name: 'xAI',                sub: 'Grok 3',                  tag: TAG.paid,    color: '#1A1424', kind: 'paid' },
    { name: 'DeepSeek',           sub: 'V3.1',                    tag: TAG.paid,    color: '#4D6BFE', kind: 'paid' },
  ];

  return (
    <section id="models" style={{ background:'var(--ink)', color:'white' }}>
      <div className="container">
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 60, alignItems:'end', marginBottom: 60 }}>
          <div>
            <div className="eyebrow" style={{ color:'rgba(255,255,255,0.5)' }}><span className="dot" style={{ background:'var(--pink-2)' }} /> {t('providers.eyebrow')}</div>
            <h2 style={{ marginTop: 18, color:'white' }}>
              {t('providers.h2_part1')}<span className="serif brand-text" style={{ fontStyle:'italic' }}>{t('providers.h2_part2')}</span>
            </h2>
          </div>
          <p className="lede" style={{ color:'rgba(255,255,255,0.65)', maxWidth: 480 }}>
            {t('providers.lede')}
          </p>
        </div>

        <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 14 }}>
          {providers.map(p => (
            <div key={p.name} style={{
              background:'rgba(255,255,255,0.04)',
              border:'1px solid rgba(255,255,255,0.08)',
              borderRadius: 18, padding: 22,
              position:'relative', overflow:'hidden',
              transition:'all .25s ease',
            }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = 'rgba(194,111,217,0.5)'; e.currentTarget.style.background = 'rgba(255,255,255,0.06)'; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(255,255,255,0.08)'; e.currentTarget.style.background = 'rgba(255,255,255,0.04)'; }}
            >
              <div style={{
                width: 36, height: 36, borderRadius: 9, background: p.color,
                marginBottom: 18, display:'flex', alignItems:'center', justifyContent:'center',
                color:'white', fontWeight: 700, fontSize: 16,
                boxShadow:'inset 0 1px 0 rgba(255,255,255,0.15)',
              }}>{p.name[0]}</div>
              <div style={{ fontSize: 15, fontWeight: 600 }}>{p.name}</div>
              {p.sub && <div style={{ fontSize: 12, color:'rgba(255,255,255,0.5)', marginTop: 2 }}>{p.sub}</div>}
              <div style={{
                marginTop: 18, fontSize: 11, padding:'4px 9px',
                background: p.kind === 'nokey' ? 'rgba(40,200,64,0.18)' : p.kind === 'freekey' ? 'rgba(123,123,232,0.18)' : 'rgba(194,111,217,0.18)',
                color: p.kind === 'nokey' ? '#54e07a' : p.kind === 'freekey' ? '#a8b0ff' : '#e4b8f0',
                borderRadius: 999, display:'inline-block', fontWeight: 500,
              }}>{p.tag}</div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 40, padding: 24, background:'rgba(194,111,217,0.08)', border:'1px solid rgba(194,111,217,0.2)', borderRadius: 18, display:'flex', alignItems:'center', gap: 18 }}>
          <div style={{ width: 44, height: 44, borderRadius: 10, background:'linear-gradient(135deg,#C26FD9,#7B7BE8)', display:'flex', alignItems:'center', justifyContent:'center', color:'white' }}>
            <Icons.Power size={22} />
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 600, fontSize: 16 }}>{t('providers.killswitch_t')}</div>
            <div style={{ color:'rgba(255,255,255,0.6)', fontSize: 13.5, marginTop: 4 }}>
              {t('providers.killswitch_d_part1')}
              <span className="mono" style={{ color:'var(--pink)' }}> updates.mailtwin.ai/config.json </span>
              {t('providers.killswitch_d_part2')}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.ProvidersSection = ProvidersSection;