/* eslint-disable */
/* Page-level hero + shared layout pieces for sub-pages */

function PageHero({ eyebrow, title, subtitle, bgImage }) {
  return (
    <section style={{ padding: '104px 16px 24px', background: '#FAFAF7', position: 'relative', overflow: 'hidden' }}>
      <img src="assets/negstech-logo-original.png" alt="" aria-hidden="true" style={{
        position: 'absolute', top: '40%', right: -200, width: 900, opacity: 0.035,
        transform: 'translateY(-50%) rotate(-8deg)', pointerEvents: 'none', zIndex: 0,
      }} />
      <div style={{ maxWidth: 1360, margin: '0 auto', position: 'relative', zIndex: 1 }}>
        <div style={{
          position: 'relative', borderRadius: 28, overflow: 'hidden',
          minHeight: 400, background: '#0f2445',
          backgroundImage: bgImage
            ? `linear-gradient(180deg, rgba(10,18,35,0.55) 0%, rgba(10,18,35,0.88) 100%), url('${bgImage}')`
            : 'linear-gradient(180deg, #0f2445 0%, #1a3566 100%)',
          backgroundSize: 'cover', backgroundPosition: 'center',
        }}>
          <img src="assets/negstech-logo-original.png" alt="" aria-hidden="true" style={{
            position: 'absolute', top: -60, right: -100, width: 520,
            opacity: 0.07, pointerEvents: 'none',
            filter: 'brightness(1.8) saturate(1.2)',
          }} />
          <div style={{ position: 'absolute', inset: 0, padding: '48px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#ff8a3d', fontWeight: 600 }}>
                {eyebrow}
              </div>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)' }}>
                Since 1984
              </div>
            </div>
            <div style={{ maxWidth: 880, marginTop: 32 }}>
              <h1 className="display" style={{
                fontSize: 'clamp(48px, 6.5vw, 96px)',
                letterSpacing: '-0.04em', lineHeight: 1,
                color: '#FFFFFF', fontWeight: 700, margin: '0 0 20px',
              }}>{title}</h1>
              {subtitle && (
                <p style={{ color: 'rgba(255,255,255,0.82)', fontSize: 18, lineHeight: 1.55, maxWidth: 640, margin: 0 }}>
                  {subtitle}
                </p>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function LogoWatermark({ side = 'right', top = '20%', size = 800, opacity = 0.04, rotate = -8 }) {
  const placement = side === 'right'
    ? { right: -size / 4 }
    : { left: -size / 4 };
  return (
    <img src="assets/negstech-logo-original.png" alt="" aria-hidden="true" style={{
      position: 'absolute', top, ...placement, width: size, opacity,
      transform: `translateY(-50%) rotate(${rotate}deg)`,
      pointerEvents: 'none', zIndex: 0,
    }} />
  );
}

function ProductsPageBody() {
  const products = [
    { id: 'online-ups', cat: 'UPS Sistemleri', title: 'Online UPS', kva: '1 – 800 kVA', desc: 'Çift dönüşüm online UPS. Kritik yükleriniz için kesintisiz ve temiz enerji. Hastane, veri merkezi, endüstri tesisleri için.', img: 'assets/ups-raw-20kva-front.jpg', specs: ['%97 verim', '0 ms transfer', 'THDi < %3', 'IEEE-519'] },
    { id: 'vega', cat: 'Çoklu Topoloji', title: 'VEGA Serisi', kva: '1 – 1.800+ kVA', desc: 'VEGA ailesi: Line-Interactive 600 VA\'dan modüler hyperscale 1.2 MW\'a kadar tek aile, tek arayüz. 10 yıl yedek parça taahhüdü, uzaktan izleme altyapısı standart.', img: 'assets/vega-160.jpg', specs: ['3-Level IGBT', 'Modüler yapı', '10 yıl yedek', 'SNMP/Modbus'] },
    { id: 'moduler-ups', cat: 'UPS Sistemleri', title: 'Modüler UPS', kva: '25 – 600 kVA', desc: 'Yük büyüdükçe güç modülü ekleyin. Hot-swap modül değişimi, N+1 redundancy, sıfır kesinti bakım.', img: 'assets/vega-200.jpg', specs: ['Hot-swap', 'N+1 redundancy', 'Scale on demand', 'Dokunmatik HMI'] },
    { id: 'line-interactive', cat: 'UPS Sistemleri', title: 'Line Interactive UPS', kva: '1 – 10 kVA', desc: 'Ofis ve küçük ağ tesisleri için ekonomik çözüm. AVR koruması, otomatik voltaj regülasyonu.', img: 'assets/ups-raw-1kva-front.png', specs: ['AVR korumalı', 'Sessiz', 'Kompakt', 'USB/RS232'] },
    { id: 'regulator', cat: 'Regülatör', title: 'Voltaj Regülatörleri', kva: 'Servo · Statik', desc: 'Servo motorlu ve statik voltaj regülatörleri. Şebeke dalgalanmalarından hassas ekipmanlarınızı koruyun.', img: 'assets/ups-raw-10-20kva-pair.jpg', specs: ['Servo motor', 'Statik tiristör', '±%1 doğruluk', '3 faz / tek faz'] },
    { id: 'aku', cat: 'Enerji Depolama', title: 'Endüstriyel Akü', kva: 'AGM · VRLA · Li-Ion', desc: 'AGM, VRLA ve lityum akü grupları. Kapasite testi, hücre analizi, ömür tahmini ile eksiksiz enerji depolama.', img: 'assets/photo-battery.jpg', specs: ['AGM / VRLA', 'Lityum iyon', 'Kapasite testi', 'Ömür analizi'] },
    { id: 'rezistans', cat: 'Özel Ürün', title: 'Endüstriyel Özel İmalat Rezistans', kva: 'Projeye Özel', desc: 'Endüstriyel uygulamalar için özel imalat yük rezistansları. Jeneratör testi, UPS yük testi, fren rezistansı, enerji dengeleme.', img: 'assets/ups-raw-6-10kva-pair.jpg', specs: ['Jeneratör testi', 'UPS yük testi', 'Özel tasarım', 'Yüksek güç'] },
    { id: 'ozel-direnc', cat: 'Özel Ürün', title: 'Özel Direnç Üretimi', kva: 'Projeye Özel', desc: 'Endüstriyel ısıtma elemanları, hassas direnç bobinleri, yüksek güç dirençleri. Müşteri spesifikasyonuna göre tasarım ve üretim.', img: 'assets/product-resistor.jpg', specs: ['Özel tasarım', 'Hassas tolerans', 'Yüksek güç', 'Endüstriyel'] },
    { id: 'endustriyel', cat: 'Endüstriyel', title: 'Endüstriyel UPS', kva: '100 – 800 kVA', desc: 'Ağır sanayi, rafineri, maden ve enerji santralleri için özel UPS çözümleri. IP54\'e kadar mahfaza seçenekleri.', img: 'assets/photo-industrial.jpg', specs: ['IP54 seçeneği', '-20°C / +55°C', 'Galvanik izolasyon', 'Parallel redundant'] },
  ];

  return (
    <>
      {/* Supported brands band */}
      <section style={{ padding: '80px 16px 40px', background: '#FAFAF7', position: 'relative' }}>
        <LogoWatermark side="left" top="50%" size={700} opacity={0.03} rotate={6} />
        <div style={{ maxWidth: 1360, margin: '0 auto', position: 'relative', zIndex: 1 }}>
          <div style={{ textAlign: 'center', marginBottom: 40 }}>
            <div className="mono" style={{ fontSize: 11, color: '#64748B', letterSpacing: '0.2em', textTransform: 'uppercase', marginBottom: 10 }}> Marka desteği</div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 500, color: '#0f2445' }}>
              Çoklu marka yetkili servis & yedek parça
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 16, maxWidth: 1000, margin: '0 auto' }}>
            {[
              { n: 'Schneider', slug: 'schneider', c: '#3DCD58', w: 700, ls: '-0.02em' },
              { n: 'APC',       slug: 'apc',       c: '#00ADEF', w: 800, ls: '0.04em'  },
              { n: 'Eaton',     slug: 'eaton',     c: '#DA291C', w: 700, ls: '-0.01em' },
              { n: 'Emerson',   slug: 'emerson',   c: '#00843D', w: 600, ls: '-0.005em'},
              { n: 'Vertiv',    slug: 'vertiv',    c: '#003C71', w: 700, ls: '-0.015em'},
              { n: 'Socomec',   slug: 'socomec',   c: '#003366', w: 700, ls: '0.03em'  },
            ].map((b, i) => <BrandCard key={i} b={b} />)}
          </div>
        </div>
      </section>

      {/* Product catalog grid */}
      <section style={{ padding: '80px 16px 120px', background: '#FAFAF7' }}>
        <div style={{ maxWidth: 1360, margin: '0 auto' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }}>
            {products.map(p => (
              <div key={p.id} id={p.id} style={{
                background: '#FFFFFF', borderRadius: 20, overflow: 'hidden',
                border: '1px solid #EAEAE3', display: 'flex', flexDirection: 'column',
                boxShadow: '0 10px 30px -18px rgba(15,36,69,0.12)',
                transition: 'transform 280ms ease, box-shadow 280ms ease',
              }}
                onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = '0 30px 60px -20px rgba(15,36,69,0.2)'; }}
                onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = '0 10px 30px -18px rgba(15,36,69,0.12)'; }}
              >
                <div style={{
                  aspectRatio: '16/9', backgroundImage: `url('${p.img}')`,
                  backgroundSize: 'cover', backgroundPosition: 'center',
                  position: 'relative',
                }}>
                  <div style={{
                    position: 'absolute', top: 16, left: 16,
                    padding: '6px 12px', borderRadius: 999,
                    background: 'rgba(15,36,69,0.85)', color: '#fff',
                    fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase',
                  }}>{p.cat}</div>
                </div>
                <div style={{ padding: '28px 32px', flex: 1, display: 'flex', flexDirection: 'column' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12, gap: 16, flexWrap: 'wrap' }}>
                    <div style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 700, color: '#0f2445', letterSpacing: '-0.02em' }}>{p.title}</div>
                    <div className="mono" style={{ fontSize: 12, color: '#e65100', fontWeight: 600, letterSpacing: '0.08em' }}>{p.kva}</div>
                  </div>
                  <p style={{ color: '#334155', fontSize: 14, lineHeight: 1.6, margin: '0 0 20px', flex: 1 }}>{p.desc}</p>
                  <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 20 }}>
                    {p.specs.map((s, i) => (
                      <div key={i} className="mono" style={{
                        padding: '4px 10px', borderRadius: 999, background: '#F3F4F0',
                        fontSize: 10, color: '#334155', letterSpacing: '0.06em',
                      }}>{s}</div>
                    ))}
                  </div>
                  <a href="iletisim.html" style={{
                    display: 'inline-flex', alignItems: 'center', gap: 8,
                    color: '#e65100', fontSize: 13, fontWeight: 600, textDecoration: 'none',
                    alignSelf: 'flex-start',
                  }}>Teklif al →</a>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

function ServicesPageBody() {
  const services = [
    { id: 'bakim', n: '01', t: 'Periyodik Bakım', d: 'Planlı bakım sözleşmeleri ile sistem sürekliliğinizi güvence altına alın. 3, 6 veya 12 aylık kapsamlı kontrol programları. Termal kamera, kapasitans testi, firmware güncelleme, hücre analizi.', img: 'assets/photo-maintenance.jpg' },
    { id: 'ariza', n: '02', t: 'Acil Arıza Servisi', d: '7/24 saha servisi. Kritik arızalarınıza en hızlı müdahale garantisi. SLA kapsamında uzaktan izleme ve acil müdahale. Kart seviyesinde onarım.', img: 'assets/photo-repair.jpg' },
    { id: 'batarya', n: '03', t: 'Batarya Değişimi', d: 'AGM, VRLA ve lityum akü grupları için periyodik değişim ve kapasite testi. Eski akülerin yönetmeliğe uygun geri dönüşümü.', img: 'assets/photo-battery.jpg' },
    { id: 'izleme', n: '04', t: 'Uzaktan İzleme', d: 'SNMP/Modbus IoT entegrasyonu. Canlı telemetri, önleyici uyarılar. negsservice.com portalından 7/24 erişim.', img: 'assets/photo-industrial.jpg' },
    { id: 'devreye-alma', n: '05', t: 'Devreye Alma', d: 'Yerinde kurulum, konfigürasyon ve test. Kullanıcı eğitimi, teknik dokümantasyon teslimi, devir testi raporu.', img: 'assets/ups-raw-20kva-front.jpg' },
    { id: 'destek', n: '06', t: '7/24 Teknik Destek', d: 'SLA garantili teknik destek hattı. Uzaktan arıza teşhisi, yerinde müdahale planlaması, yedek parça tedariği.', img: 'assets/photo-maintenance.jpg' },
  ];

  return (
    <>
      <section style={{ padding: '80px 16px 40px', background: '#FAFAF7', position: 'relative' }}>
        <LogoWatermark side="left" top="30%" size={600} opacity={0.03} rotate={-4} />
        <div style={{ maxWidth: 1360, margin: '0 auto', position: 'relative', zIndex: 1 }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }}>
            {services.map(s => (
              <div key={s.id} id={s.id} style={{
                background: '#FFFFFF', borderRadius: 20, overflow: 'hidden',
                border: '1px solid #EAEAE3',
                boxShadow: '0 10px 30px -18px rgba(15,36,69,0.12)',
                display: 'grid', gridTemplateColumns: '160px 1fr', gap: 0,
              }}>
                <div style={{
                  backgroundImage: `url('${s.img}')`, backgroundSize: 'cover', backgroundPosition: 'center',
                }} />
                <div style={{ padding: 32 }}>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 12 }}>
                    <div style={{ fontFamily: 'var(--font-display)', fontSize: 36, fontWeight: 700, color: '#e65100', lineHeight: 1, letterSpacing: '-0.04em' }}>{s.n}</div>
                    <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 700, color: '#0f2445', letterSpacing: '-0.015em' }}>{s.t}</div>
                  </div>
                  <p style={{ color: '#334155', fontSize: 14, lineHeight: 1.6, margin: 0 }}>{s.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Portal band */}
      <section style={{ padding: '80px 16px 120px', background: '#FAFAF7' }}>
        <div style={{ maxWidth: 1360, margin: '0 auto' }}>
          <div style={{
            borderRadius: 28, padding: '56px 48px', position: 'relative', overflow: 'hidden',
            background: '#0f2445', color: '#F4F4F5',
            display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 48, alignItems: 'center',
          }}>
            <img src="assets/negstech-logo-original.png" alt="" aria-hidden="true" style={{
              position: 'absolute', top: -80, right: -80, width: 500,
              opacity: 0.08, pointerEvents: 'none', filter: 'brightness(1.8)',
            }} />
            <div style={{ position: 'relative', zIndex: 1 }}>
              <div className="mono" style={{ fontSize: 11, color: '#ff8a3d', letterSpacing: '0.2em', textTransform: 'uppercase', fontWeight: 600, marginBottom: 16 }}> Dijital platform</div>
              <h3 className="display" style={{ fontSize: 'clamp(32px, 4vw, 52px)', fontWeight: 700, letterSpacing: '-0.03em', color: '#fff', margin: '0 0 20px' }}>negsservice.com Müşteri Portalı</h3>
              <p style={{ color: 'rgba(255,255,255,0.82)', fontSize: 16, lineHeight: 1.6, maxWidth: 540, margin: '0 0 28px' }}>
                Servis taleplerinizi oluşturun, bakım geçmişinizi görüntüleyin, sözleşme durumunuzu 7/24 takip edin. Dijital bakım raporları ve SLA yönetimi tek platformda.
              </p>
              <a href="https://negsservice.com" style={{
                padding: '14px 26px', borderRadius: 999, background: '#e65100', color: '#fff',
                fontSize: 14, fontWeight: 600, textDecoration: 'none',
                display: 'inline-flex', alignItems: 'center', gap: 10,
              }}>Portala giriş yap →</a>
            </div>
            <div style={{ position: 'relative', zIndex: 1 }}>
              {[
                { t: 'Açık Talepler', v: '3' },
                { t: 'Tamamlanan', v: '127' },
                { t: 'Sözleşme', v: 'Aktif' },
                { t: 'Sonraki Bakım', v: '15 Nis' },
              ].map((k, i) => (
                <div key={i} style={{
                  display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
                  padding: '16px 0',
                  borderBottom: i < 3 ? '1px solid rgba(255,255,255,0.1)' : 'none',
                }}>
                  <div className="mono" style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>{k.t}</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 700, color: '#fff' }}>{k.v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

function BrandCard({ b }) {
  const [imgOk, setImgOk] = React.useState(true);
  return (
    <div style={{
      padding: '18px 12px', textAlign: 'center',
      background: '#FFFFFF', border: '1px solid #EAEAE3', borderRadius: 10,
      minHeight: 60, display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      {imgOk ? (
        <img
          src={`assets/brands/${b.slug}.svg`}
          alt={b.n}
          onError={() => setImgOk(false)}
          style={{ maxHeight: 28, maxWidth: '100%', objectFit: 'contain' }}
        />
      ) : (
        <span style={{
          fontFamily: 'var(--font-display)',
          fontSize: 17, fontWeight: b.w, color: b.c, letterSpacing: b.ls,
        }}>{b.n}</span>
      )}
    </div>
  );
}

function AboutPageBody() {
  return (
    <>
      {/* Story */}
      <section style={{ padding: '100px 16px 80px', background: '#FAFAF7', position: 'relative' }}>
        <LogoWatermark side="right" top="40%" size={900} opacity={0.035} rotate={-6} />
        <div style={{ maxWidth: 1200, margin: '0 auto', position: 'relative', zIndex: 1 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 72, alignItems: 'center', marginBottom: 80 }}>
            <div style={{
              position: 'relative', borderRadius: 20, overflow: 'hidden',
              aspectRatio: '4/5', background: '#0f2445',
              backgroundImage: `url('assets/photo-industrial.jpg')`,
              backgroundSize: 'cover', backgroundPosition: 'center',
            }}>
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 40%, rgba(15,36,69,0.9) 100%)' }} />
              <div style={{ position: 'absolute', bottom: 32, left: 32, right: 32, color: '#fff' }}>
                <div className="mono" style={{ fontSize: 11, color: '#ff8a3d', letterSpacing: '0.18em', marginBottom: 8 }}>1984-2026</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600, lineHeight: 1.2 }}>
                  40 yıldır Türkiye'nin enerjisini ayakta tutuyoruz.
                </div>
              </div>
            </div>
            <div>
              <div className="mono" style={{ fontSize: 11, color: '#e65100', letterSpacing: '0.2em', textTransform: 'uppercase', fontWeight: 600, marginBottom: 16 }}> Hikayemiz</div>
              <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 72px)', letterSpacing: '-0.035em', lineHeight: 1, color: '#0f2445', margin: '0 0 28px', fontWeight: 700 }}>
                40 yıllık deneyim,<br /><span style={{ color: '#e65100' }}>yeni vizyon.</span>
              </h2>
              <p style={{ color: '#334155', fontSize: 17, lineHeight: 1.7, margin: '0 0 20px' }}>
                1984'ten bu yana <strong>Nuray Elektrik Elektronik</strong> adıyla sektörde edindiğimiz 40 yıllık bilgi birikimi ve güven, şimdi <strong>NEGS Tech</strong> markasıyla geleceğe taşınıyor.
              </p>
              <p style={{ color: '#334155', fontSize: 17, lineHeight: 1.7, margin: '0 0 20px' }}>
                Kesintisiz güç sistemlerinde Türkiye'nin en köklü ekiplerinden biriyiz. Binlerce başarılı proje, yüzlerce mutlu müşteri.
              </p>
              <p style={{ color: '#334155', fontSize: 17, lineHeight: 1.7, margin: '0 0 28px' }}>
                Sahip olduğumuz <strong>yeterlilik belgeleri</strong> ve yetkili servis sertifikalarımız, teknik kapasitemizin bağımsız tescilidir.
              </p>
              <div style={{ display: 'flex', gap: 32, flexWrap: 'wrap' }}>
                {[
                  { n: '40+', l: 'Yıl sektör deneyimi' },
                  { n: 'NEGS', l: 'Yeni nesil marka' },
                  { n: 'VEGA', l: 'Kendi üretimimiz' },
                ].map((x, i) => (
                  <div key={i}>
                    <div style={{ fontFamily: 'var(--font-display)', fontSize: 30, fontWeight: 700, color: '#e65100', letterSpacing: '-0.03em' }}>{x.n}</div>
                    <div className="mono" style={{ fontSize: 11, color: '#64748B', letterSpacing: '0.12em', textTransform: 'uppercase' }}>{x.l}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Sertifikalar */}
      <section id="sertifikalar" style={{ padding: '20px 16px 80px', background: '#FAFAF7' }}>
        <div style={{ maxWidth: 1360, margin: '0 auto' }}>
          <div style={{
            background: '#FFFFFF', borderRadius: 20, padding: 48, border: '1px solid #EAEAE3',
            display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 48, alignItems: 'center',
          }}>
            <div>
              <div className="mono" style={{ fontSize: 11, color: '#e65100', letterSpacing: '0.2em', textTransform: 'uppercase', fontWeight: 600, marginBottom: 12 }}> Sertifikalar</div>
              <h3 className="display" style={{ fontSize: 32, fontWeight: 700, color: '#0f2445', margin: 0, letterSpacing: '-0.02em' }}>
                Uluslararası standartlar
              </h3>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
              {['ISO 9001', 'ISO 14001', 'CE', 'TSE'].map((c, i) => (
                <div key={i} style={{
                  padding: 20, textAlign: 'center',
                  background: '#F3F4F0', border: '1px solid #EAEAE3', borderRadius: 12,
                  fontFamily: 'var(--font-display)', fontSize: 14, fontWeight: 600, color: '#0f2445',
                }}>{c}</div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Why us */}
      <section style={{ padding: '80px 16px', background: '#F3F4F0' }}>
        <div style={{ maxWidth: 1360, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 48 }}>
            <div className="mono" style={{ fontSize: 11, color: '#e65100', letterSpacing: '0.2em', textTransform: 'uppercase', fontWeight: 600, marginBottom: 12 }}> Neden biz</div>
            <h2 className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', letterSpacing: '-0.035em', lineHeight: 1, color: '#0f2445', margin: 0, fontWeight: 700 }}>
              NEGS Tech farkı
            </h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
            {[
              { t: '40+ Yıllık Deneyim', d: '1984\'ten bu yana kesintisiz güç sistemleri alanında. Binlerce başarılı proje.' },
              { t: 'Uzman Mühendislik', d: 'Elektrik-elektronik mühendisleri ve sertifikalı teknik personel.' },
              { t: 'Kendi Markamız', d: 'VEGA serisi UPS ve özel rezistans çözümleri. Dünya kalitesi üretim.' },
              { t: 'Dijital Servis', d: 'negsservice.com üzerinden 7/24 servis talebi ve sözleşme yönetimi.' },
            ].map((x, i) => (
              <div key={i} style={{
                background: '#FFFFFF', padding: 28, borderRadius: 16, border: '1px solid #EAEAE3',
              }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 32, fontWeight: 700, color: '#e65100', letterSpacing: '-0.03em', marginBottom: 12 }}>{String(i + 1).padStart(2, '0')}</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600, color: '#0f2445', marginBottom: 10, letterSpacing: '-0.015em' }}>{x.t}</div>
                <div style={{ color: '#334155', fontSize: 14, lineHeight: 1.55 }}>{x.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Supported brands */}
      <section id="referanslar" style={{ padding: '80px 16px', background: '#FAFAF7' }}>
        <div style={{ maxWidth: 1360, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 40 }}>
            <div className="mono" style={{ fontSize: 11, color: '#e65100', letterSpacing: '0.2em', textTransform: 'uppercase', fontWeight: 600, marginBottom: 12 }}> Marka desteği</div>
            <h2 className="display" style={{ fontSize: 'clamp(32px, 4vw, 48px)', letterSpacing: '-0.03em', color: '#0f2445', margin: 0, fontWeight: 700 }}>
              Desteklediğimiz markalar
            </h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 16, maxWidth: 1000, margin: '0 auto' }}>
            {[
              { n: 'Schneider', slug: 'schneider', c: '#3DCD58', w: 700, ls: '-0.02em' },
              { n: 'APC',       slug: 'apc',       c: '#00ADEF', w: 800, ls: '0.04em'  },
              { n: 'Eaton',     slug: 'eaton',     c: '#DA291C', w: 700, ls: '-0.01em' },
              { n: 'Emerson',   slug: 'emerson',   c: '#00843D', w: 600, ls: '-0.005em'},
              { n: 'Vertiv',    slug: 'vertiv',    c: '#003C71', w: 700, ls: '-0.015em'},
              { n: 'Socomec',   slug: 'socomec',   c: '#003366', w: 700, ls: '0.03em'  },
            ].map((b, i) => <BrandCard key={i} b={b} />)}
          </div>
        </div>
      </section>

    </>
  );
}

function ContactPageBody() {
  return (
    <section style={{ padding: '80px 16px 120px', background: '#FAFAF7', position: 'relative' }}>
      <LogoWatermark side="right" top="50%" size={900} opacity={0.04} rotate={-8} />
      <div style={{ maxWidth: 1200, margin: '0 auto', position: 'relative', zIndex: 1 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 48 }}>

          {/* Contact info */}
          <div>
            <div className="mono" style={{ fontSize: 11, color: '#e65100', letterSpacing: '0.2em', textTransform: 'uppercase', fontWeight: 600, marginBottom: 14 }}> Bize ulaşın</div>
            <h2 className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 56px)', letterSpacing: '-0.035em', lineHeight: 1, color: '#0f2445', margin: '0 0 24px', fontWeight: 700 }}>
              Projeniz için<br />mühendislik görüşü.
            </h2>
            <p style={{ color: '#334155', fontSize: 16, lineHeight: 1.65, margin: '0 0 40px', maxWidth: 460 }}>
              Ücretsiz keşif ve ön değerlendirme için hemen iletişime geçin. Mühendislerimiz en kısa sürede size dönüş yapacaktır.
            </p>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 18, marginBottom: 32 }}>
              <div style={{
                display: 'flex', alignItems: 'flex-start', gap: 16,
                padding: 18, borderRadius: 14, background: '#FFFFFF', border: '1px solid #EAEAE3',
              }}>
                <div style={{ width: 44, height: 44, borderRadius: 10, background: '#e65100', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                </div>
                <div style={{ flex: 1 }}>
                  <div className="mono" style={{ fontSize: 10, color: '#64748B', letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 4 }}>Telefon</div>
                  <a href="tel:+905425725417" style={{ display: 'block', fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 700, color: '#0f2445', letterSpacing: '-0.01em', textDecoration: 'none', marginBottom: 2 }}>+(90) 542 572 54 17</a>
                  <a href="tel:+905322556744" style={{ display: 'block', fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 600, color: '#334155', letterSpacing: '-0.005em', textDecoration: 'none' }}>+(90) 532 255 67 44</a>
                </div>
              </div>

              <a href="mailto:bilgi@negs.com.tr" style={{
                display: 'flex', alignItems: 'center', gap: 16, textDecoration: 'none',
                padding: 18, borderRadius: 14, background: '#FFFFFF', border: '1px solid #EAEAE3',
              }}>
                <div style={{ width: 44, height: 44, borderRadius: 10, background: '#0f2445', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
                </div>
                <div>
                  <div className="mono" style={{ fontSize: 10, color: '#64748B', letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 2 }}>E-posta</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600, color: '#0f2445' }}>bilgi@negs.com.tr</div>
                </div>
              </a>

              <div style={{
                display: 'flex', alignItems: 'flex-start', gap: 16,
                padding: 18, borderRadius: 14, background: '#FFFFFF', border: '1px solid #EAEAE3',
              }}>
                <div style={{ width: 44, height: 44, borderRadius: 10, background: '#334155', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
                </div>
                <div>
                  <div className="mono" style={{ fontSize: 10, color: '#64748B', letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 2 }}>Adres</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 15, fontWeight: 500, color: '#0f2445', lineHeight: 1.5 }}>
                    Sedir Mah. Zambak Cad. No:47/B<br />Muratpaşa / Antalya
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Form */}
          <ContactForm />
        </div>
      </div>
    </section>
  );
}

function ContactForm() {
  const [status, setStatus] = React.useState('idle');
  const [errorMsg, setErrorMsg] = React.useState('');

  async function handleSubmit(e) {
    e.preventDefault();
    if (status === 'sending') return;
    const formEl = e.currentTarget;
    const fd = new FormData(formEl);
    const payload = {
      name: fd.get('name') || '',
      company: fd.get('company') || '',
      email: fd.get('email') || '',
      phone: fd.get('phone') || '',
      interest: fd.get('interest') || '',
      message: fd.get('message') || '',
      _gotcha: fd.get('_gotcha') || '',
    };
    setStatus('sending');
    setErrorMsg('');
    try {
      const res = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      const json = await res.json().catch(() => ({}));
      if (!res.ok || !json.ok) {
        const errMap = {
          rate_limited: 'Çok fazla istek gönderildi. Lütfen bir saat sonra tekrar deneyin.',
          bad_email: 'Geçerli bir e-posta adresi girin.',
          missing_fields: 'Lütfen tüm zorunlu alanları doldurun.',
          delivery_failed: 'İletim başarısız. Lütfen telefondan ulaşın: +(90) 542 572 54 17',
        };
        setErrorMsg(errMap[json.error] || 'Bir hata oluştu. Lütfen telefonla iletişime geçin.');
        setStatus('err');
        return;
      }
      setStatus('ok');
      formEl.reset();
    } catch (err) {
      setErrorMsg('Bağlantı hatası. Lütfen tekrar deneyin veya telefondan ulaşın.');
      setStatus('err');
    }
  }

  return (
    <div style={{
      background: '#FFFFFF', padding: 40, borderRadius: 20, border: '1px solid #EAEAE3',
      boxShadow: '0 20px 50px -20px rgba(15,36,69,0.14)',
    }}>
      <div className="mono" style={{ fontSize: 11, color: '#e65100', letterSpacing: '0.2em', textTransform: 'uppercase', fontWeight: 600, marginBottom: 12 }}> Teklif formu</div>
      <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 700, color: '#0f2445', margin: '0 0 28px', letterSpacing: '-0.02em' }}>
        Ücretsiz keşif talebi
      </h3>

      {status === 'ok' ? (
        <div style={{
          padding: 28, borderRadius: 14, background: '#ECFDF5', border: '1px solid #A7F3D0',
          color: '#065F46', textAlign: 'center',
        }}>
          <div style={{ fontSize: 36, marginBottom: 8 }}>✓</div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 700, marginBottom: 6 }}>Teklif talebiniz alındı</div>
          <div style={{ fontSize: 14, lineHeight: 1.6 }}>Mühendislerimiz en kısa sürede sizinle iletişime geçecek. Acil durumda: <a href="tel:+905425725417" style={{ color: '#065F46', fontWeight: 600 }}>+(90) 542 572 54 17</a></div>
          <button onClick={() => setStatus('idle')} style={{
            marginTop: 18, padding: '10px 20px', borderRadius: 999, background: 'transparent',
            color: '#065F46', border: '1px solid #065F46', cursor: 'pointer',
            fontFamily: 'var(--font-body)', fontSize: 13, fontWeight: 600,
          }}>Yeni talep gönder</button>
        </div>
      ) : (
        <form onSubmit={handleSubmit} noValidate>
          {/* Honeypot — gerçek kullanıcılar görmez */}
          <div style={{ position: 'absolute', left: '-9999px', width: 1, height: 1, overflow: 'hidden' }} aria-hidden="true">
            <label>Bırakın boş kalsın <input type="text" name="_gotcha" tabIndex={-1} autoComplete="off" /></label>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 14 }}>
            <ContactField label="Ad Soyad" name="name" required />
            <ContactField label="Firma" name="company" />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 14 }}>
            <ContactField label="E-posta" name="email" type="email" required />
            <ContactField label="Telefon" name="phone" type="tel" />
          </div>
          <div style={{ marginBottom: 14 }}>
            <label className="mono" style={{ fontSize: 10, color: '#64748B', letterSpacing: '0.14em', textTransform: 'uppercase', display: 'block', marginBottom: 6 }}>İlgi alanı</label>
            <select name="interest" defaultValue="Online UPS (1 – 1.800+ kVA)" style={{
              width: '100%', padding: '12px 14px', borderRadius: 8, border: '1px solid #CBD5E1',
              fontFamily: 'var(--font-body)', fontSize: 14, color: '#0f2445', background: '#FAFAF7',
            }}>
              <option>Online UPS (1 – 1.800+ kVA)</option>
              <option>VEGA Serisi</option>
              <option>Modüler UPS</option>
              <option>Voltaj Regülatörü</option>
              <option>Endüstriyel Akü</option>
              <option>Periyodik Bakım Sözleşmesi</option>
              <option>Arıza Servisi</option>
              <option>Diğer</option>
            </select>
          </div>
          <div style={{ marginBottom: 20 }}>
            <label className="mono" style={{ fontSize: 10, color: '#64748B', letterSpacing: '0.14em', textTransform: 'uppercase', display: 'block', marginBottom: 6 }}>Mesaj *</label>
            <textarea name="message" required rows={4} style={{
              width: '100%', padding: '12px 14px', borderRadius: 8, border: '1px solid #CBD5E1',
              fontFamily: 'var(--font-body)', fontSize: 14, color: '#0f2445', background: '#FAFAF7',
              resize: 'vertical', boxSizing: 'border-box',
            }} placeholder="Yük, mevcut altyapı, öncelikleriniz..." />
          </div>

          {status === 'err' && errorMsg && (
            <div style={{
              padding: 12, borderRadius: 10, background: '#FEF2F2', border: '1px solid #FCA5A5',
              color: '#991B1B', fontSize: 13, marginBottom: 14, lineHeight: 1.5,
            }}>{errorMsg}</div>
          )}

          <button type="submit" disabled={status === 'sending'} style={{
            width: '100%', padding: '16px 26px', borderRadius: 999,
            background: status === 'sending' ? '#94A3B8' : '#e65100',
            color: '#fff', border: 'none', cursor: status === 'sending' ? 'wait' : 'pointer',
            fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 600,
            boxShadow: status === 'sending' ? 'none' : '0 14px 30px -10px rgba(230,81,0,0.5)',
            transition: 'background 0.2s',
          }}>
            {status === 'sending' ? 'Gönderiliyor…' : 'Teklif talebi gönder →'}
          </button>
        </form>
      )}
    </div>
  );
}

function ContactField({ label, name, type = 'text', required }) {
  return (
    <div>
      <label className="mono" style={{ fontSize: 10, color: '#64748B', letterSpacing: '0.14em', textTransform: 'uppercase', display: 'block', marginBottom: 6 }}>{label}{required && ' *'}</label>
      <input type={type} name={name} required={required} style={{
        width: '100%', padding: '12px 14px', borderRadius: 8, border: '1px solid #CBD5E1',
        fontFamily: 'var(--font-body)', fontSize: 14, color: '#0f2445', background: '#FAFAF7',
        boxSizing: 'border-box',
      }} />
    </div>
  );
}

Object.assign(window, {
  PageHero, LogoWatermark,
  ProductsPageBody, ServicesPageBody, AboutPageBody, ContactPageBody, ContactField, ContactForm,
});