// Bring-your-own-key: 8 providers grid
const ProvidersSection = () => {
  const providers = [
    { name: 'Apple Intelligence', sub: 'On-device', tag: 'No key needed', color: '#0E0B14', kind: 'nokey' },
    { name: 'Ollama', sub: 'Local — anything', tag: 'No key needed', color: '#7B7BE8', kind: 'nokey' },
    { name: 'Groq', sub: 'Llama 3.3 70B', tag: 'Free tier · your key', color: '#F55036', kind: 'freekey' },
    { name: 'Google', sub: 'Gemini 2.5 Pro', tag: 'Free tier · your key', color: '#4285F4', kind: 'freekey' },
    { name: 'Anthropic', sub: 'Claude Opus 4.7', tag: 'Paid · your key', color: '#D97757', kind: 'paid' },
    { name: 'OpenAI', sub: 'GPT-5 / o4', tag: 'Paid · your key', color: '#0E9F6E', kind: 'paid' },
    { name: 'xAI', sub: 'Grok 3', tag: 'Paid · your key', color: '#1A1424', kind: 'paid' },
    { name: 'DeepSeek', sub: 'V3.1', tag: 'Paid · your key', 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)' }} /> Bring your own key · 8 providers</div>
            <h2 style={{ marginTop: 18, color:'white' }}>
              Pick the AI that <span className="serif brand-text" style={{ fontStyle:'italic' }}>fits your job.</span>
            </h2>
          </div>
          <p className="lede" style={{ color:'rgba(255,255,255,0.65)', maxWidth: 480 }}>
            Most "AI for Mail" apps lock you into one provider's billing. MailTwin hands you the keys —
            switch model per task, optimize for cost, latency, or privacy. Two providers run with no key at all.
          </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 }}>Provider kill-switch via remote config</div>
            <div style={{ color:'rgba(255,255,255,0.6)', fontSize: 13.5, marginTop: 4 }}>
              When a provider deprecates a model at 11pm, we flip a flag on
              <span className="mono" style={{ color:'var(--pink)' }}> updates.mailtwin.ai/config.json </span>
              and every install surfaces a clear "switch provider" banner within 4 hours. No app update needed.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.ProvidersSection = ProvidersSection;