/* eslint-disable */
/* VEGA product family selector with live preview */

const VEGA_MODELS = [
  {
    id: '01', tag: 'compact', name: 'VEGA 01',
    range: '600 VA – 3 kVA', topology: 'Line-Interactive',
    voltage: '230 V AC ±10%', pf: '0.9', bypass: '—',
    desc: 'Küçük ofis, kasa, POS ve modem koruması için kompakt çözüm.',
    tags: ['Ofis', 'POS', 'Modem'],
  },
  {
    id: '1-20', tag: 'online', name: 'VEGA 1-20',
    range: '1 – 20 kVA', topology: 'Online Double-Conversion',
    voltage: '230 V AC ±10%', pf: '1.0', bypass: 'Statik bypass',
    desc: 'Sunucu odaları, ağ ekipmanları ve kritik iş istasyonları için.',
    tags: ['Sunucu odası', 'Ağ', 'İş istasyonu'],
  },
  {
    id: '20-120', tag: '3-faz', name: 'VEGA 20-120',
    range: '20 – 120 kVA', topology: '3-Faz Online',
    voltage: '400 V AC ±10%', pf: '1.0', bypass: 'Statik bypass',
    desc: 'Veri merkezleri, üretim hatları ve büyük ofis altyapıları için.',
    tags: ['Veri merkezi', 'Üretim', 'Paralel redundant'],
  },
  {
    id: '120+', tag: 'modüler', name: 'VEGA 120+',
    range: '120 kVA – 1.2 MW', topology: 'Modüler Hyperscale',
    voltage: '400 V AC ±10%', pf: '1.0', bypass: 'Statik bypass',
    desc: 'Hyperscale veri merkezleri ve endüstriyel tesisler için modüler güç.',
    tags: ['Hyperscale', 'Hot-swap', 'N+1/2N'],
  },
];

function VegaSection() {
  const [active, setActive] = React.useState('20-120');
  const model = VEGA_MODELS.find(m => m.id === active);

  return (
    <section id="vega" className="section" style={{ padding: '160px 48px' }}>
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 80, flexWrap: 'wrap', gap: 32 }}>
          <div>
            <div className="eyebrow eyebrow--accent" style={{ marginBottom: 16 }}>01 · Tek Mimari</div>
            <h2 className="display" style={{ fontSize: 'clamp(48px, 6vw, 96px)' }}>
              Tek mimari,<br />tek arayüz.
            </h2>
          </div>
          <p style={{ color: '#A1A1AA', fontSize: 17, lineHeight: 1.6, fontWeight: 300, maxWidth: 420, margin: 0 }}>
            VEGA ailesi: 600 VA Line-Interactive&apos;den modüler hyperscale 1.2 MW&apos;a kadar dört topoloji, tek tasarım dili. Her ürün aynı uzaktan izleme altyapısı, aynı bakım protokolü, aynı yedek parça katalogu.
          </p>
        </div>

        {/* Model picker */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, border: '1px solid #26262B', borderRadius: 10, overflow: 'hidden', marginBottom: 8 }}>
          {VEGA_MODELS.map((m, i) => {
            const isActive = m.id === active;
            return (
              <button key={m.id} onClick={() => setActive(m.id)} style={{
                padding: '28px 24px',
                background: isActive ? '#141418' : '#0A0A0B',
                border: 'none',
                borderLeft: i > 0 ? '1px solid #26262B' : 'none',
                borderTop: isActive ? '2px solid #e65100' : '2px solid transparent',
                cursor: 'pointer',
                textAlign: 'left',
                transition: 'background 160ms cubic-bezier(0.2, 0.8, 0.2, 1)',
                position: 'relative',
              }}
                onMouseEnter={e => !isActive && (e.currentTarget.style.background = '#101014')}
                onMouseLeave={e => !isActive && (e.currentTarget.style.background = '#0A0A0B')}
              >
                <div className="eyebrow" style={{ color: isActive ? '#e65100' : '#52525B', marginBottom: 12 }}>{m.tag}</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 600, letterSpacing: '-0.02em', color: '#F4F4F5', lineHeight: 1.1, marginBottom: 6 }}>{m.name}</div>
                <div className="mono" style={{ fontSize: 12, color: '#71717A', marginTop: 4 }}>{m.range}</div>
              </button>
            );
          })}
        </div>

        {/* Detail panel */}
        <div style={{
          background: '#0E0E12', border: '1px solid #26262B', borderRadius: 10,
          padding: 56,
        }}>
          <div key={`${active}-d`} style={{ animation: 'fadeUp 400ms cubic-bezier(0.2,0.8,0.2,1)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 14, color: '#e65100', letterSpacing: '0.12em', fontWeight: 600 }}>NEGS</div>
              <div style={{ width: 24, height: 1, background: '#35353C' }} />
              <div className="eyebrow">{model.tag}</div>
            </div>
            <h3 className="display" style={{ fontSize: 72, marginBottom: 12 }}>{model.name}</h3>
            <p style={{ color: '#A1A1AA', fontSize: 17, lineHeight: 1.6, fontWeight: 300, marginBottom: 32, maxWidth: 640 }}>{model.desc}</p>

            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 36 }}>
              {model.tags.map(t => (
                <span key={t} style={{ padding: '6px 12px', border: '1px solid #26262B', borderRadius: 999, fontFamily: 'var(--font-mono)', fontSize: 10, color: '#A1A1AA', letterSpacing: '0.1em', textTransform: 'uppercase' }}>{t}</span>
              ))}
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 0, border: '1px solid #26262B', borderRadius: 6, overflow: 'hidden', marginBottom: 36 }}>
              {[
                { l: 'Topoloji', v: model.topology, c: '#22D3EE', small: true },
                { l: 'Güç Aralığı', v: model.range, c: '#F4F4F5', small: true },
                { l: 'Voltaj', v: model.voltage, c: '#F4F4F5', small: true },
                { l: 'Güç Faktörü', v: model.pf, c: '#34D399' },
                { l: 'Bypass', v: model.bypass, c: '#A1A1AA', small: true },
              ].map((s, i) => (
                <div key={i} style={{ padding: '20px 18px', borderLeft: i > 0 ? '1px solid #26262B' : 'none', background: '#0A0A0B' }}>
                  <div className="eyebrow" style={{ marginBottom: 10, fontSize: 10 }}>{s.l}</div>
                  <div className="mono" style={{ fontSize: s.small ? 12 : 20, fontWeight: 500, color: s.c, letterSpacing: '-0.01em' }}>{s.v}</div>
                </div>
              ))}
            </div>

            <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
              <a href="#iletisim" className="btn btn--primary">Bu modeli teklif et →</a>
              <a href="#" className="btn btn--ghost">Datasheet (PDF)</a>
              <a href="#" style={{ color: '#22D3EE', fontSize: 13, marginLeft: 12, textDecoration: 'none', fontWeight: 500 }}>Paralel konfigürasyon →</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { VegaSection, VEGA_MODELS });