/* eslint-disable */
/* Light-theme showcase sections */

function VegaHorizontal() {
  const models = [
    {
      id: '01', tag: 'compact', name: 'VEGA 01', color: '#64748B',
      range: '600 VA – 3 kVA', topology: 'Line-Interactive', pf: '0.9', voltage: '230 V AC',
      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', color: '#0891B2',
      range: '1 – 20 kVA', topology: 'Online Double-Conversion', pf: '1.0', voltage: '230 V AC',
      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', color: '#059669',
      range: '20 – 120 kVA', topology: '3-Faz Online', pf: '1.0', voltage: '400 V AC',
      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+', color: '#e65100',
      range: '120 kVA – 1.2 MW', topology: 'Modüler Hyperscale', pf: '1.0', voltage: '400 V AC',
      desc: 'Hyperscale veri merkezleri ve endüstriyel tesisler için modüler güç.',
      tags: ['Hyperscale', 'Hot-swap', 'N+1/2N'],
    },
  ];

  const scrollerRef = React.useRef(null);
  const scroll = (dir) => {
    const el = scrollerRef.current;
    if (!el) return;
    el.scrollBy({ left: dir * el.clientWidth * 0.6, behavior: 'smooth' });
  };

  return (
    <section id="vega" className="section" style={{ padding: '160px 0 120px', borderBottom: '1px solid #EAEAE3', background: '#FAFAF7' }}>
      <div style={{ padding: '0 48px', maxWidth: 1440, margin: '0 auto', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 64, flexWrap: 'wrap', gap: 32 }}>
        <div>
          <div className="eyebrow eyebrow--accent" style={{ marginBottom: 20 }}>◆ 01 · Tek Mimari</div>
          <h2 className="display" style={{ fontSize: 'clamp(56px, 7vw, 112px)', letterSpacing: '-0.045em', maxWidth: 900 }}>
            600 VA&apos;dan 1.2 MW&apos;a.<br /><span style={{ color: '#94A3B8' }}>Tek mimari.</span>
          </h2>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button onClick={() => scroll(-1)} style={navArrowStyle}>←</button>
          <button onClick={() => scroll(1)} style={navArrowStyle}>→</button>
        </div>
      </div>

      <div ref={scrollerRef} style={{
        display: 'flex', gap: 24, overflowX: 'auto', scrollSnapType: 'x mandatory',
        padding: '0 48px 24px', scrollPaddingLeft: 48,
        scrollbarWidth: 'thin',
      }}>
        {models.map((m) => <VegaCard key={m.id} m={m} />)}
        <div style={{ flexShrink: 0, width: 24 }} />
      </div>
    </section>
  );
}

const navArrowStyle = {
  width: 48, height: 48, borderRadius: 999,
  background: '#fff', border: '1px solid #CBD5E1',
  color: '#0f2445', fontSize: 18, cursor: 'pointer',
  transition: 'all 160ms ease',
};

function VegaCard({ m }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        flexShrink: 0, width: 'min(480px, 80vw)', scrollSnapAlign: 'start',
        minHeight: 600,
        display: 'flex', flexDirection: 'column',
        borderRadius: 20, border: '1px solid #E5E7EB',
        background: 'linear-gradient(180deg, #FFFFFF 0%, #F8F8F3 100%)',
        position: 'relative', overflow: 'hidden',
        boxShadow: hover ? '0 24px 48px -12px rgba(15,36,69,0.18)' : '0 4px 12px -4px rgba(15,36,69,0.06)',
        transition: 'transform 400ms cubic-bezier(0.2,0.8,0.2,1), border-color 280ms, box-shadow 280ms',
        transform: hover ? 'translateY(-6px)' : 'none',
        borderColor: hover ? m.color : '#E5E7EB',
        cursor: 'pointer',
      }}>
      {/* Decorative radial glow */}
      <div style={{
        position: 'absolute', top: 0, left: '50%', width: 400, height: 300, borderRadius: '50%',
        background: `radial-gradient(circle, ${m.color}18 0%, transparent 65%)`,
        transform: 'translateX(-50%)',
        pointerEvents: 'none',
      }} />

      {/* Header row */}
      <div style={{ position: 'relative', padding: '32px 32px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <div>
          <div className="mono" style={{ fontSize: 10, color: m.color, letterSpacing: '0.2em', textTransform: 'uppercase', marginBottom: 8 }}>{m.tag}</div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 700, color: '#0f2445', letterSpacing: '-0.02em' }}>{m.name}</div>
        </div>
        <a href="#vega" style={{
          width: 44, height: 44, borderRadius: 999, textDecoration: 'none',
          background: hover ? m.color : '#F3F4F0',
          border: `1px solid ${hover ? m.color : '#E5E7EB'}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: hover ? '#fff' : '#0f2445', fontSize: 16,
          transition: 'all 280ms ease', flexShrink: 0,
        }}>→</a>
      </div>

      {/* Range hero */}
      <div style={{ position: 'relative', padding: '28px 32px 0' }}>
        <div style={{
          fontFamily: 'var(--font-display)', fontSize: 'clamp(32px, 4vw, 48px)',
          fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1.1,
          color: hover ? m.color : '#0f2445',
          transition: 'color 280ms ease',
        }}>{m.range}</div>
        <div className="mono" style={{ fontSize: 11, color: '#64748B', letterSpacing: '0.14em', marginTop: 4, textTransform: 'uppercase' }}>{m.topology}</div>
      </div>

      {/* Desc */}
      <div style={{ padding: '20px 32px 0', color: '#334155', fontSize: 14, lineHeight: 1.6 }}>{m.desc}</div>

      {/* Tag chips */}
      <div style={{ padding: '16px 32px 0', display: 'flex', gap: 8, flexWrap: 'wrap' }}>
        {m.tags.map(t => (
          <span key={t} style={{
            padding: '4px 10px', borderRadius: 999,
            background: hover ? `${m.color}14` : '#F3F4F0',
            border: `1px solid ${hover ? m.color + '44' : '#EAEAE3'}`,
            fontFamily: 'var(--font-mono)', fontSize: 10, color: hover ? m.color : '#64748B',
            letterSpacing: '0.06em', textTransform: 'uppercase',
            transition: 'all 280ms ease',
          }}>{t}</span>
        ))}
      </div>

      {/* Spec grid */}
      <div style={{ marginTop: 'auto', borderTop: '1px solid #EAEAE3', marginTop: 24 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }}>
          {[
            { l: 'Voltaj', v: m.voltage },
            { l: 'Güç Faktörü', v: m.pf },
            { l: 'Topoloji', v: m.topology, small: true },
          ].map((s, i) => (
            <div key={i} style={{ padding: '16px 18px', borderLeft: i > 0 ? '1px solid #EAEAE3' : 'none', borderTop: '1px solid #EAEAE3' }}>
              <div className="mono" style={{ fontSize: 9, color: '#94A3B8', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 4 }}>{s.l}</div>
              <div className="mono" style={{ fontSize: s.small ? 10 : 13, color: '#0f2445', fontWeight: 500 }}>{s.v}</div>
            </div>
          ))}
        </div>
        <div style={{ padding: '16px 20px', borderTop: '1px solid #EAEAE3', display: 'flex', justifyContent: 'flex-end' }}>
          <a href="#vega" style={{
            color: m.color, fontSize: 13, fontWeight: 600, textDecoration: 'none',
            display: 'inline-flex', alignItems: 'center', gap: 6,
          }}>Detaylı incele →</a>
        </div>
      </div>
    </div>
  );
}

function BentoReferences() {
  return (
    <section className="section" style={{ padding: '160px 48px', background: '#F3F4F0', borderBottom: '1px solid #EAEAE3' }}>
      <div style={{ maxWidth: 1440, margin: '0 auto' }}>
        <div style={{ marginBottom: 64, display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 32 }}>
          <div>
            <div className="eyebrow eyebrow--cyan" style={{ marginBottom: 20 }}>◆ 05 · Saha</div>
            <h2 className="display" style={{ fontSize: 'clamp(56px, 7vw, 112px)', letterSpacing: '-0.045em' }}>
              Sayılar konuşsun.
            </h2>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gridAutoRows: '180px', gap: 16 }}>
          <div style={{ gridColumn: 'span 3', gridRow: 'span 2', ...bentoBase, padding: 40, position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 80% 30%, rgba(8,145,178,0.12) 0%, transparent 60%)' }} />
            <div style={{ position: 'relative' }}>
              <div className="eyebrow eyebrow--cyan" style={{ marginBottom: 16 }}>Uptime ortalaması</div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(120px, 14vw, 220px)', fontWeight: 700, letterSpacing: '-0.055em', color: '#0f2445', lineHeight: 0.9 }}>
                99<span style={{ color: '#0891B2' }}>.97</span><span style={{ color: '#94A3B8', fontSize: '0.5em' }}>%</span>
              </div>
              <p style={{ color: '#334155', fontSize: 15, lineHeight: 1.5, maxWidth: 380, marginTop: 20 }}>
                247 canlı izlemeli ünitenin son 12 aydaki uptime ortalaması. Veri merkezi sınıfı güvenilirlik.
              </p>
            </div>
          </div>

          <div style={{ gridColumn: 'span 3', gridRow: 'span 1', ...bentoBase, padding: 28, display: 'flex', alignItems: 'center', gap: 24 }}>
            <div style={{ width: 80, height: 80, borderRadius: 999, background: 'rgba(16,185,129,0.08)', border: '1px solid #10B981', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
              <div className="status-dot status-dot--online" style={{ width: 12, height: 12 }} />
            </div>
            <div>
              <div className="eyebrow" style={{ marginBottom: 6 }}>Şu an aktif</div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 56, fontWeight: 600, color: '#0f2445', letterSpacing: '-0.03em', lineHeight: 1 }}>247</div>
              <div className="mono" style={{ fontSize: 12, color: '#64748B', marginTop: 6 }}>ünite · canlı izleme</div>
            </div>
          </div>

          <div style={{ gridColumn: 'span 3', gridRow: 'span 1', ...bentoBase, padding: 28, position: 'relative', overflow: 'hidden' }}>
            <div className="eyebrow eyebrow--accent" style={{ marginBottom: 8 }}>Toplam kapasite</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 12 }}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 48, fontWeight: 600, color: '#0f2445', letterSpacing: '-0.03em', lineHeight: 1 }}>38.4</div>
              <div className="mono" style={{ fontSize: 14, color: '#64748B' }}>MVA</div>
            </div>
            <div style={{ height: 4, background: '#E5E7EB', borderRadius: 2, overflow: 'hidden', marginBottom: 8 }}>
              <div style={{ width: '68%', height: '100%', background: 'linear-gradient(90deg, #e65100, #FBBF24)' }} />
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <div className="mono" style={{ fontSize: 10, color: '#94A3B8', letterSpacing: '0.08em' }}>%68 nominal</div>
              <div className="mono" style={{ fontSize: 10, color: '#059669' }}>+2.1 MVA / bu ay</div>
            </div>
          </div>

          <div style={{ gridColumn: 'span 2', gridRow: 'span 2', ...bentoBase, padding: 28 }}>
            <div className="eyebrow" style={{ marginBottom: 20 }}>Sektör dağılımı</div>
            <SectorBars />
          </div>

          <div style={{ gridColumn: 'span 2', gridRow: 'span 2', ...bentoBase, padding: 28, position: 'relative', overflow: 'hidden' }}>
            <div className="eyebrow" style={{ marginBottom: 12 }}>Saha ağı</div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 32, fontWeight: 600, color: '#0f2445', letterSpacing: '-0.02em', marginBottom: 6 }}>
              7 bölge · 42 şehir
            </div>
            <TurkeyHint />
          </div>

          <div style={{ gridColumn: 'span 2', gridRow: 'span 2', ...bentoBase, padding: 28, position: 'relative', overflow: 'hidden', background: 'linear-gradient(135deg, #FFF7ED 0%, #FFFFFF 100%)', borderColor: '#e65100' }}>
            <div style={{ position: 'absolute', top: -40, right: -40, width: 200, height: 200, borderRadius: '50%', background: 'radial-gradient(circle, rgba(230,81,0,0.2) 0%, transparent 60%)' }} />
            <div style={{ position: 'relative' }}>
              <div className="eyebrow eyebrow--accent" style={{ marginBottom: 16 }}>Mühendislik mirası</div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 140, fontWeight: 700, color: '#0f2445', letterSpacing: '-0.055em', lineHeight: 0.85 }}>42</div>
              <div className="mono" style={{ fontSize: 11, color: '#e65100', letterSpacing: '0.16em', textTransform: 'uppercase', marginTop: 8 }}>yıl · 1984 → 2026</div>
              <p style={{ color: '#334155', fontSize: 13, lineHeight: 1.5, marginTop: 16 }}>
                Nuray Elektrik'ten NEGS Tech'e. Aynı disiplin, yeni nesil teknoloji.
              </p>
            </div>
          </div>
        </div>

        <div style={{ overflow: 'hidden', marginTop: 80, borderTop: '1px solid #EAEAE3', borderBottom: '1px solid #EAEAE3', maskImage: 'linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)' }}>
          <div style={{ display: 'flex', animation: 'tickerScroll 60s linear infinite', width: 'max-content' }}>
            {[
              ...['Türk Telekom', 'Acıbadem', 'Medicana', 'ASELSAN', 'TÜBİTAK', 'Ford Otosan', 'BSH', 'Arçelik', 'TAI', 'MNG Kargo', 'Memorial', 'Koç Holding', 'Doğuş'],
              ...['Türk Telekom', 'Acıbadem', 'Medicana', 'ASELSAN', 'TÜBİTAK', 'Ford Otosan', 'BSH', 'Arçelik', 'TAI', 'MNG Kargo', 'Memorial', 'Koç Holding', 'Doğuş'],
            ].map((logo, i) => (
              <div key={i} style={{
                padding: '32px 56px',
                fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600,
                color: '#94A3B8', letterSpacing: '-0.01em', whiteSpace: 'nowrap',
                borderRight: '1px solid #EAEAE3',
              }}>{logo}</div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

const bentoBase = {
  background: '#FFFFFF', border: '1px solid #E5E7EB', borderRadius: 12,
  boxShadow: '0 1px 2px rgba(15,36,69,0.04)',
  transition: 'border-color 200ms ease',
};

function SectorBars() {
  const data = [
    { l: 'Veri merkezi', p: 38, c: '#0891B2' },
    { l: 'Sağlık', p: 26, c: '#059669' },
    { l: 'Endüstri', p: 22, c: '#e65100' },
    { l: 'Altyapı', p: 14, c: '#D97706' },
  ];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      {data.map((d, i) => (
        <div key={i}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
            <div style={{ fontSize: 12, color: '#334155' }}>{d.l}</div>
            <div className="mono" style={{ fontSize: 12, color: d.c, fontWeight: 600 }}>%{d.p}</div>
          </div>
          <div style={{ height: 4, background: '#E5E7EB', borderRadius: 2, overflow: 'hidden' }}>
            <div style={{ width: `${d.p * 2.5}%`, height: '100%', background: d.c }} />
          </div>
        </div>
      ))}
    </div>
  );
}

function TurkeyHint() {
  const dots = [
    { x: 34, y: 70, s: 1 },
    { x: 55, y: 42, s: 0.7 },
    { x: 20, y: 38, s: 0.7 },
    { x: 75, y: 45, s: 0.5 },
    { x: 48, y: 65, s: 0.5 },
    { x: 82, y: 68, s: 0.5 },
    { x: 62, y: 78, s: 0.4 },
  ];
  return (
    <div style={{ position: 'relative', marginTop: 20, aspectRatio: '3/2', background: '#F8F8F3', border: '1px solid #E5E7EB', borderRadius: 6, padding: 16, overflow: 'hidden' }}>
      <svg viewBox="0 0 100 60" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        <path d="M 5 25 Q 15 15, 35 18 Q 55 14, 75 20 Q 90 22, 96 30 Q 92 40, 85 42 Q 70 45, 55 42 Q 40 45, 20 42 Q 8 38, 5 25 Z"
          fill="#FFFFFF" stroke="#CBD5E1" strokeWidth="0.5" />
        {dots.map((d, i) => (
          <g key={i}>
            <circle cx={d.x} cy={d.y * 0.6 + 10} r={d.s * 2} fill={i === 0 ? '#e65100' : '#0891B2'}>
              <animate attributeName="r" values={`${d.s * 2};${d.s * 3};${d.s * 2}`} dur="3s" repeatCount="indefinite" begin={`${i * 0.3}s`} />
            </circle>
            <circle cx={d.x} cy={d.y * 0.6 + 10} r={d.s * 1} fill="#FFFFFF" />
          </g>
        ))}
      </svg>
      <div style={{ position: 'absolute', bottom: 12, left: 12, display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{ width: 6, height: 6, borderRadius: 999, background: '#e65100' }} />
        <div className="mono" style={{ fontSize: 10, color: '#64748B', letterSpacing: '0.1em' }}>ANTALYA HQ</div>
      </div>
    </div>
  );
}

Object.assign(window, { VegaHorizontal, BentoReferences });