/* eslint-disable */
/* v2 — Kart-bazlı, fotoğraf-ağırlık, CNC-sitesi ilhamlı */

function V2Nav({ active }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  React.useEffect(() => {
    const onResize = () => { if (window.innerWidth > 768) setOpen(false); };
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);
  const links = [
    { href: 'index.html', key: 'home', label: 'Ana Sayfa' },
    { href: 'urunler.html', key: 'urunler', label: 'Ürünler' },
    { href: 'hizmetler.html', key: 'hizmetler', label: 'Hizmetler' },
    { href: 'kurumsal.html', key: 'kurumsal', label: 'Kurumsal' },
    { href: 'iletisim.html', key: 'iletisim', label: 'İletişim' },
  ];
  return (
    <header style={{
      position: 'fixed', top: 20, left: 20, right: 20, zIndex: 50,
      display: 'flex', justifyContent: 'center',
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '10px 14px 10px 22px', borderRadius: 999,
        background: scrolled
          ? 'linear-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.5) 100%)'
          : 'linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.35) 100%)',
        backdropFilter: 'blur(24px) saturate(180%)',
        WebkitBackdropFilter: 'blur(24px) saturate(180%)',
        boxShadow: scrolled
          ? '0 1px 0 rgba(255,255,255,0.9) inset, 0 -1px 0 rgba(15,36,69,0.06) inset, 0 20px 50px -15px rgba(15,36,69,0.18)'
          : '0 1px 0 rgba(255,255,255,0.8) inset, 0 -1px 0 rgba(15,36,69,0.04) inset, 0 10px 30px -12px rgba(15,36,69,0.12)',
        border: '1px solid rgba(255,255,255,0.6)',
        maxWidth: 1240, width: '100%',
        transition: 'all 220ms cubic-bezier(0.2, 0.8, 0.2, 1)',
      }}>
        <a href="index.html" style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none' }}>
          <img src="assets/negstech-logo-original.png" alt="NEGS Tech" style={{ height: 36 }} />
        </a>
        <nav className="nav-desktop-links" style={{ display: 'flex', gap: 2 }}>
          {links.map(l => {
            const isActive = active === l.key;
            return (
            <a key={l.href} href={l.href} style={{
              padding: '9px 14px',
              color: isActive ? '#e65100' : '#0f2445',
              fontSize: 13,
              fontWeight: isActive ? 600 : 500,
              textDecoration: 'none', borderRadius: 999, transition: 'all 140ms ease',
              letterSpacing: '0.005em',
              background: isActive ? 'rgba(230,81,0,0.08)' : 'transparent',
            }}
              onMouseEnter={e => { if (!isActive) { e.currentTarget.style.background = 'rgba(15,36,69,0.08)'; e.currentTarget.style.color = '#e65100'; } }}
              onMouseLeave={e => { if (!isActive) { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = '#0f2445'; } }}
            >{l.label}</a>
          )})}
        </nav>
        <a href="iletisim.html" className="nav-cta-desktop" style={{
          padding: '10px 20px', borderRadius: 999,
          background: 'linear-gradient(135deg, #e65100 0%, #ff8a3d 100%)', color: '#fff',
          fontSize: 13, fontWeight: 600, textDecoration: 'none',
          boxShadow: '0 1px 0 rgba(255,255,255,0.3) inset, 0 8px 20px -6px rgba(230,81,0,0.5)',
          display: 'inline-flex', alignItems: 'center', gap: 6,
        }}>Teklif al<span style={{ fontSize: 11 }}>→</span></a>

        <button
          className="nav-mobile-toggle"
          aria-label="Menü"
          aria-expanded={open}
          onClick={() => setOpen(o => !o)}
          style={{
            display: 'none',
            width: 42, height: 42, borderRadius: 999,
            border: '1px solid rgba(15,36,69,0.1)',
            background: 'rgba(255,255,255,0.7)',
            alignItems: 'center', justifyContent: 'center',
            cursor: 'pointer', padding: 0,
          }}
        >
          <span style={{
            position: 'relative', width: 18, height: 12, display: 'inline-block',
          }}>
            <span style={{ position:'absolute', left:0, right:0, height:2, background:'#0f2445', borderRadius:2, top: open ? 5 : 0, transform: open ? 'rotate(45deg)' : 'none', transition:'all 200ms' }}/>
            <span style={{ position:'absolute', left:0, right:0, height:2, background:'#0f2445', borderRadius:2, top: 5, opacity: open ? 0 : 1, transition:'opacity 150ms' }}/>
            <span style={{ position:'absolute', left:0, right:0, height:2, background:'#0f2445', borderRadius:2, top: open ? 5 : 10, transform: open ? 'rotate(-45deg)' : 'none', transition:'all 200ms' }}/>
          </span>
        </button>
      </div>

      {open && (
        <div className="nav-mobile-panel" onClick={(e) => { if (e.target.tagName === 'A') setOpen(false); }}>
          {links.map(l => (
            <a key={l.href} href={l.href} className={active === l.key ? 'active' : ''}>{l.label}</a>
          ))}
          <a href="iletisim.html" className="cta">Teklif al →</a>
        </div>
      )}
    </header>
  );
}

function V2Hero() {
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => { requestAnimationFrame(() => setMounted(true)); }, []);

  return (
    <section style={{ padding: '104px 16px 24px', background: '#FAFAF7', position: 'relative', overflow: 'hidden' }}>
      {/* decorative big logo watermark */}
      <img src="assets/negstech-logo-original.png" alt="" aria-hidden="true" style={{
        position: 'absolute', top: '50%', right: -220, width: 1100, opacity: 0.04,
        transform: 'translateY(-50%) rotate(-8deg)', pointerEvents: 'none', zIndex: 0,
      }} />
      <div style={{ maxWidth: 1360, margin: '0 auto', position: 'relative', zIndex: 1 }}>
        <div className={mounted ? 'hero-img-in' : 'hero-img-init'} style={{
          position: 'relative', borderRadius: 28, overflow: 'hidden',
          minHeight: 680, background: '#0f2445',
          backgroundImage: `linear-gradient(180deg, rgba(10,18,35,0.65) 0%, rgba(10,18,35,0.92) 100%), url('assets/photo-industrial.jpg')`,
          backgroundSize: 'cover', backgroundPosition: 'center',
        }}>
          {/* decorative logo burst, top-right */}
          <img src="assets/negstech-logo-original.png" alt="" aria-hidden="true" style={{
            position: 'absolute', top: -80, right: -120, width: 720,
            opacity: 0.08, pointerEvents: 'none',
            filter: 'brightness(1.6) saturate(1.3)',
          }} />
          {/* engineering blueprint grid texture */}
          <div className="blueprint-grid blueprint-grid--dark" aria-hidden="true" />
          <div style={{ position: 'absolute', inset: 0, padding: 48, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <div className={mounted ? 'hero-text-in delay-1' : 'hero-text-init'} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', color: '#F4F4F5' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <div className="status-dot status-dot--online" />
                <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.8)' }}>
                  Since 1984 · Güvenilir Enerji
                </div>
              </div>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.6)' }}>
                Antalya · Türkiye Cumhuriyeti
              </div>
            </div>

            <div style={{ maxWidth: 960 }}>
              {/* BIG logo showpiece */}
              <div className={mounted ? 'hero-text-in delay-2' : 'hero-text-init'} style={{
                background: 'rgba(255,255,255,0.96)',
                display: 'inline-block', padding: '28px 40px', borderRadius: 20,
                marginBottom: 40,
                boxShadow: '0 30px 80px -20px rgba(0,0,0,0.5)',
              }}>
                <img src="assets/negstech-logo-original.png" alt="NEGS Tech Güç Sistemleri" style={{ height: 100, display: 'block' }} />
              </div>

              <h1 className={`display ${mounted ? 'hero-text-in delay-3' : 'hero-text-init'}`} style={{
                fontSize: 'clamp(48px, 6.5vw, 96px)',
                letterSpacing: '-0.035em', lineHeight: 1,
                color: '#FFFFFF', fontWeight: 700, marginBottom: 0,
              }}>
                Kesintisiz güç,<br />
                <span style={{ color: '#ff8a3d' }}>güvenilir teknoloji.</span>
              </h1>
            </div>

            <div className={mounted ? 'hero-text-in delay-4' : 'hero-text-init'} style={{ display: 'grid', gridTemplateColumns: '1.3fr auto auto', gap: 24, alignItems: 'end' }}>
              <p style={{ color: 'rgba(255,255,255,0.82)', fontSize: 17, lineHeight: 1.55, maxWidth: 560, margin: 0 }}>
                1984'ten bu yana endüstriyel ve ticari tesisler için kesintisiz güç kaynağı, voltaj regülatörü, akü, endüstriyel özel imalat rezistans ve özel direnç çözümleri. 1 – 1.800+ kVA online UPS aralığında VEGA serisi.
              </p>
              <a href="urunler.html" style={{
                padding: '16px 26px', borderRadius: 999, background: '#e65100', color: '#fff',
                fontSize: 14, fontWeight: 600, textDecoration: 'none',
                display: 'inline-flex', alignItems: 'center', gap: 10,
                boxShadow: '0 18px 36px -10px rgba(230,81,0,0.6)',
              }}>Ürünleri incele →</a>
              <a href="iletisim.html" style={{
                padding: '16px 26px', borderRadius: 999, border: '1px solid rgba(255,255,255,0.3)',
                color: '#fff', fontSize: 14, fontWeight: 500, textDecoration: 'none',
              }}>Teklif al</a>
            </div>
          </div>
        </div>

        {/* Under-hero quick-stats card */}
        <div style={{
          marginTop: -56, marginLeft: 48, marginRight: 48, position: 'relative', zIndex: 4,
          background: '#FFFFFF', borderRadius: 20, padding: '24px 32px',
          boxShadow: '0 30px 60px -20px rgba(15,36,69,0.25), 0 0 0 1px rgba(15,36,69,0.06)',
          display: 'grid', gridTemplateColumns: '1.3fr 1fr 1fr 1fr', gap: 32, alignItems: 'center',
        }}>
          <div>
            <div className="eyebrow eyebrow--accent" style={{ marginBottom: 6 }}>Hızlı teklif</div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600, color: '#0f2445', lineHeight: 1.2 }}>
              Ücretsiz keşif +<br /><span style={{ color: '#e65100' }}>mühendis görüşü.</span>
            </div>
          </div>
          <V2Stat n="40+" u="yıl" l="sektör deneyimi" />
          <V2Stat n="1 – 1.800+" u="kVA" l="UPS ürün aralığı" />
          <V2Stat n="7/24" u="" l="SLA destek" />
        </div>
      </div>
    </section>
  );
}

function V2Stat({ n, u, l }) {
  return (
    <div style={{ borderLeft: '1px solid #EAEAE3', paddingLeft: 24 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 4 }}>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 38, fontWeight: 600, color: '#0f2445', letterSpacing: '-0.03em', lineHeight: 1 }}>{n}</div>
        {u && <div className="mono" style={{ fontSize: 13, color: '#64748B' }}>{u}</div>}
      </div>
      <div className="eyebrow">{l}</div>
    </div>
  );
}

function V2TrustBand() {
  return (
    <section style={{ padding: '120px 16px 80px', background: '#FAFAF7' }}>
      <div style={{ maxWidth: 1360, margin: '0 auto' }}>
        <div style={{
          borderRadius: 28, padding: 48, position: 'relative', overflow: 'hidden',
          background: `linear-gradient(105deg, rgba(15,36,69,0.92) 0%, rgba(15,36,69,0.6) 60%, rgba(15,36,69,0.2) 100%), url('assets/photo-repair.jpg')`,
          backgroundSize: 'cover', backgroundPosition: 'center',
          color: '#F4F4F5', minHeight: 420,
          display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 48, alignItems: 'center',
        }}>
          <div>
            <div className="mono" style={{ fontSize: 12, color: '#ff8a3d', letterSpacing: '0.2em', textTransform: 'uppercase', fontWeight: 600, marginBottom: 20 }}>— Deneyim · Güven</div>
            <h2 className="display" style={{
              fontSize: 'clamp(40px, 5.5vw, 80px)', letterSpacing: '-0.04em', lineHeight: 0.98,
              color: '#FFFFFF', textTransform: 'uppercase', fontWeight: 700, marginBottom: 24,
            }}>
              Kanıtlanmış mühendislik.<br />
              <span style={{ color: '#ff8a3d' }}>40 yıllık disiplin.</span>
            </h2>
            <p style={{ color: 'rgba(255,255,255,0.82)', fontSize: 17, lineHeight: 1.6, maxWidth: 520, marginBottom: 32 }}>
              Nuray Elektrik (1984) mirası üzerine kurulu. Her UPS'in arkasında 10 yıl yedek parça taahhüdü, 24/7 saha servisi ve uzaktan izleme var.
            </p>
            <div style={{ display: 'flex', gap: 48 }}>
              {[
                { n: '%99.97', l: 'uptime ortalama' },
                { n: '28+', l: 'sektör hastane' },
                { n: '110+', l: 'baz istasyonu' },
              ].map((s, i) => (
                <div key={i}>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 32, fontWeight: 600, color: '#ff8a3d', letterSpacing: '-0.03em' }}>{s.n}</div>
                  <div className="mono" style={{ fontSize: 11, color: 'rgba(255,255,255,0.6)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>{s.l}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function V2Services() {
  const services = [
    { n: '01', t: 'UPS Satışı', d: 'VEGA serisi 1 – 1.800+ kVA online UPS, yerinde devreye alma.', img: 'assets/service-ups-rack.jpg' },
    { n: '02', t: 'Akü Sistemleri', d: 'VRLA ve lityum akü bankları, yedek süresi tasarımı.', img: 'assets/photo-battery.jpg' },
    { n: '03', t: 'Periyodik Bakım', d: 'Yıllık termal kamera, kapasitans testi, firmware güncelleme.', img: 'assets/photo-maintenance.jpg' },
    { n: '04', t: 'Arıza Onarımı', d: '24/7 saha servisi, kart seviyesinde onarım, 4 saat yanıt.', img: 'assets/photo-repair.jpg' },
    { n: '05', t: 'Uzaktan İzleme', d: 'SNMP/Modbus IoT, canlı telemetri, önleyici uyarılar.', img: 'assets/service-monitoring.jpg' },
    { n: '06', t: 'Proje Mühendisliği', d: 'Yük analizi, redundancy mimarisi, anahtar teslim kurulum.', img: 'assets/service-engineering.jpg' },
  ];
  return (
    <section id="hizmetler" style={{ padding: '40px 16px 120px', background: '#FAFAF7' }}>
      <div style={{ maxWidth: 1360, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <div className="eyebrow eyebrow--accent" style={{ marginBottom: 14 }}>— Hizmetlerimiz</div>
          <h2 className="display" style={{
            fontSize: 'clamp(44px, 5vw, 72px)', letterSpacing: '-0.035em', textTransform: 'uppercase', fontWeight: 700,
          }}>
            Güç süreklilik<br /><span style={{ color: '#e65100' }}>hizmetleri</span>
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {services.map(s => (
            <div key={s.n} style={{
              background: '#FFFFFF', borderRadius: 20, padding: 28, position: 'relative',
              boxShadow: '0 1px 2px rgba(15,36,69,0.04), 0 10px 30px -18px rgba(15,36,69,0.12)',
              border: '1px solid #EAEAE3', transition: 'transform 300ms ease, box-shadow 300ms ease',
              display: 'flex', flexDirection: 'column', gap: 20, cursor: 'pointer',
            }}
              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 1px 2px rgba(15,36,69,0.04), 0 10px 30px -18px rgba(15,36,69,0.12)'; }}
            >
              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 20 }}>
                <div style={{
                  fontFamily: 'var(--font-display)', fontSize: 40, fontWeight: 700,
                  color: '#e65100', lineHeight: 1, letterSpacing: '-0.04em',
                }}>{s.n}</div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600, color: '#0f2445', marginBottom: 8, letterSpacing: '-0.01em' }}>{s.t}</div>
                  <div style={{ fontSize: 14, color: '#334155', lineHeight: 1.55 }}>{s.d}</div>
                </div>
              </div>
              <div style={{
                borderRadius: 14, height: 140, overflow: 'hidden', position: 'relative',
                backgroundImage: `url('${s.img}')`, backgroundSize: 'cover', backgroundPosition: 'center',
              }}>
                <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 40%, rgba(15,36,69,0.6) 100%)' }} />
                <div style={{ position: 'absolute', bottom: 12, right: 14, width: 32, height: 32, borderRadius: 999, background: '#FFFFFF', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#0f2445', fontSize: 16, fontWeight: 600 }}>→</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function V2Industries() {
  const industries = [
    { tag: '01', name: 'Hastaneler & Sağlık', desc: 'Ameliyathane, yoğun bakım, MR/CT — sıfır toleranslı kesintisiz güç.', img: 'assets/sector-health.jpg', meta: 'IEC 60601-1-2 · Galvanik izolasyon' },
    { tag: '02', name: 'Veri Merkezleri', desc: '%99.999 uptime, N+1/2N redundancy, Tier III/IV mimariler.', img: 'assets/sector-datacenter.jpg', meta: 'Tier III/IV · Hassas soğutma' },
    { tag: '03', name: 'Endüstriyel Tesisler', desc: 'Üretim hattı, CNC, motor sürücü, harmonik filtreleme.', img: 'assets/sector-industrial.jpg', meta: '-10 / +50°C · %150 aşırı yük' },
    { tag: '04', name: 'Kamu Kurumları', desc: 'Güvenlik, iletişim, hizmet altyapısı sürekliliği.', img: 'assets/sector-government.jpg', meta: 'Sertifikalı sistemler' },
    { tag: '05', name: 'Finans & Bankacılık', desc: 'ATM ağı, şube operasyonu, PCI-DSS uyumu.', img: 'assets/sector-finance.jpg', meta: 'PCI-DSS · 7/24 izleme' },
    { tag: '06', name: 'Telekomünikasyon', desc: 'Baz istasyonu, santral, IP54 dış mahal dayanıklılık.', img: 'assets/sector-telecom.jpg', meta: 'SNMPv3 · Modbus TCP · IP54' },
  ];
  return (
    <section id="cozumler" style={{ padding: '96px 56px', background: '#F3F4F0', position: 'relative', overflow: 'hidden' }}>
      <div className="blueprint-grid" aria-hidden="true" />
      <div style={{ maxWidth: 1440, margin: '0 auto 56px', textAlign: 'center', position: 'relative', zIndex: 1 }}>
        <div style={{
          fontFamily: "'JetBrains Mono', ui-monospace, monospace",
          fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase',
          color: '#e65100', fontWeight: 600, marginBottom: 14,
        }}>Sektörler</div>
        <h2 className="display" style={{
          fontFamily: "'Space Grotesk', sans-serif",
          fontSize: 'clamp(36px, 5vw, 72px)', fontWeight: 600,
          color: '#0f2445', lineHeight: 1.1, letterSpacing: '-0.025em',
          margin: 0,
        }}>
          Hizmet verdiğimiz <span style={{ color: '#e65100', fontWeight: 700 }}>alanlar.</span>
        </h2>
      </div>
      <div style={{
        maxWidth: 1440, margin: '0 auto', position: 'relative', zIndex: 1,
        display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 16,
      }}>
        {industries.map((s, i) => {
          const isOdd = i % 2 === 0; // staggered: 1./3./5. cards drop
          return (
            <article key={i} style={{
              position: 'relative', aspectRatio: '3 / 5',
              borderRadius: 12, overflow: 'hidden', cursor: 'pointer',
              marginTop: isOdd ? 32 : 0,
              transition: 'transform 300ms ease',
            }}
              onMouseEnter={e => {
                e.currentTarget.style.transform = 'translateY(-4px)';
                const img = e.currentTarget.querySelector('img');
                if (img) img.style.transform = 'scale(1.08)';
                const meta = e.currentTarget.querySelector('.industry-meta');
                if (meta) { meta.style.opacity = '1'; meta.style.transform = 'translateY(0)'; }
              }}
              onMouseLeave={e => {
                e.currentTarget.style.transform = 'none';
                const img = e.currentTarget.querySelector('img');
                if (img) img.style.transform = 'none';
                const meta = e.currentTarget.querySelector('.industry-meta');
                if (meta) { meta.style.opacity = '0'; meta.style.transform = 'translateY(6px)'; }
              }}
            >
              <img src={s.img} alt={s.name} loading="lazy"
                style={{
                  position: 'absolute', inset: 0, width: '100%', height: '100%',
                  objectFit: 'cover', transition: 'transform 400ms ease',
                }}
                onError={e => { e.currentTarget.style.background = '#1a3564'; }}
              />
              <div style={{
                position: 'absolute', inset: 0, zIndex: 1,
                background: 'linear-gradient(180deg, transparent 30%, rgba(15,36,69,0.85) 100%)',
              }} />
              <div style={{
                position: 'absolute', bottom: 0, left: 0, right: 0,
                padding: 20, color: '#fff', zIndex: 2,
              }}>
                <div style={{
                  fontFamily: "'JetBrains Mono', ui-monospace, monospace",
                  fontSize: 9, letterSpacing: '0.2em', textTransform: 'uppercase',
                  color: '#ff8a3d', fontWeight: 600, marginBottom: 6,
                }}>{s.tag}</div>
                <div style={{
                  fontFamily: "'Space Grotesk', sans-serif",
                  fontSize: 18, fontWeight: 600, lineHeight: 1.2, marginBottom: 8,
                }}>{s.name}</div>
                <div className="industry-desc" style={{
                  fontSize: 12, color: 'rgba(255,255,255,0.85)', lineHeight: 1.45, marginBottom: 10, opacity: 1,
                }}>{s.desc}</div>
                <div className="industry-meta" style={{
                  fontFamily: "'JetBrains Mono', ui-monospace, monospace",
                  fontSize: 9, letterSpacing: '0.16em', textTransform: 'uppercase',
                  color: '#ff8a3d', fontWeight: 600,
                  opacity: 0, transform: 'translateY(6px)',
                  transition: 'opacity 280ms ease, transform 280ms ease',
                }}>{s.meta}</div>
              </div>
            </article>
          );
        })}
      </div>
    </section>
  );
}

function V2CTABand() {
  return (
    <section style={{ padding: '80px 16px', background: '#FAFAF7' }}>
      <div style={{ maxWidth: 1360, margin: '0 auto' }}>
        <div style={{
          borderRadius: 28, padding: '64px 56px', position: 'relative', overflow: 'hidden',
          background: 'linear-gradient(120deg, #e65100 0%, #ff8a3d 100%)',
          display: 'grid', gridTemplateColumns: '1.3fr auto', gap: 48, alignItems: 'center',
        }}>
          <div style={{ position: 'absolute', top: -80, right: -80, width: 360, height: 360, borderRadius: '50%', background: 'rgba(255,255,255,0.12)' }} />
          <div style={{ position: 'absolute', bottom: -120, left: -60, width: 300, height: 300, borderRadius: '50%', background: 'rgba(255,255,255,0.08)' }} />
          <div style={{ position: 'relative' }}>
            <div className="mono" style={{ fontSize: 12, color: 'rgba(255,255,255,0.8)', letterSpacing: '0.2em', textTransform: 'uppercase', marginBottom: 16, fontWeight: 600 }}>— Özel teklif al</div>
            <h2 className="display" style={{
              fontSize: 'clamp(40px, 5vw, 72px)', letterSpacing: '-0.035em',
              color: '#FFFFFF', textTransform: 'uppercase', fontWeight: 700, lineHeight: 1, margin: 0,
            }}>
              Projeniz için<br />mühendislik görüşü
            </h2>
          </div>
          <a href="#iletisim" style={{
            padding: '20px 36px', borderRadius: 999, background: '#0f2445', color: '#fff',
            fontSize: 15, fontWeight: 600, textDecoration: 'none',
            display: 'inline-flex', alignItems: 'center', gap: 12, position: 'relative',
            boxShadow: '0 20px 40px -12px rgba(15,36,69,0.5)',
          }}>Teklif talebi gönder →</a>
        </div>
      </div>
    </section>
  );
}

function V2Footer() {
  return (
    <footer style={{ background: '#FAFAF7', color: '#0f2445', padding: '72px 48px 20px', position: 'relative', overflow: 'hidden', borderTop: '1px solid #EAEAE3' }}>
      {/* Watermark wordmark */}
      <div aria-hidden="true" style={{
        position: 'absolute', left: 0, right: 0, bottom: 56,
        textAlign: 'center',
        fontFamily: 'var(--font-display, "Inter", sans-serif)',
        fontWeight: 800,
        fontSize: 'clamp(200px, 28vw, 420px)',
        lineHeight: 0.85,
        letterSpacing: '-0.06em',
        color: 'transparent',
        WebkitTextStroke: '2px rgba(230,81,0,0.32)',
        pointerEvents: 'none',
        userSelect: 'none',
        whiteSpace: 'nowrap',
        zIndex: 0,
      }}>NEGSTECH</div>

      <div style={{ maxWidth: 1440, margin: '0 auto', position: 'relative', zIndex: 1 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr 1fr', gap: 48, marginBottom: 120 }}>

          {/* Brand block */}
          <div>
            <img src="assets/negstech-logo-original.png" alt="NEGS Tech Güç Sistemleri" style={{ height: 54, marginBottom: 20, display: 'block' }} />
            <p style={{ color: '#52525B', fontSize: 13, lineHeight: 1.55, margin: '0 0 20px', maxWidth: 300 }}>
              UPS satış, bakım-onarım, teknik servis ve kesintisiz enerji altyapısı alanında 1984'den bu yana uzman hizmet.
            </p>
            <a href="iletisim.html" style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '10px 16px', borderRadius: 999,
              border: '1px solid #CBD5E1', background: '#FFFFFF',
              fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase',
              color: '#0f2445', textDecoration: 'none', fontWeight: 600,
            }}>
              Teklif al
              <span style={{ color: '#e65100' }}>→</span>
            </a>
          </div>

          {/* Ürünler */}
          <V2FooterCol title="Ürünler" links={[
            { t: 'Online UPS', h: 'urunler.html#online-ups' },
            { t: 'Modüler UPS', h: 'urunler.html#moduler-ups' },
            { t: 'VEGA Serisi', h: 'urunler.html#vega' },
            { t: 'Voltaj Regülatörü', h: 'urunler.html#regulator' },
            { t: 'Endüstriyel Akü', h: 'urunler.html#aku' },
          ]} />

          {/* Hizmetler */}
          <V2FooterCol title="Hizmetler" links={[
            { t: 'Periyodik Bakım', h: 'hizmetler.html#bakim' },
            { t: 'Acil Arıza Servisi', h: 'hizmetler.html#ariza' },
            { t: 'Batarya Değişimi', h: 'hizmetler.html#batarya' },
            { t: 'Uzaktan İzleme', h: 'hizmetler.html#izleme' },
            { t: 'Devreye Alma', h: 'hizmetler.html#devreye-alma' },
          ]} />

          {/* Kurumsal */}
          <V2FooterCol title="Kurumsal" links={[
            { t: 'Hakkımızda', h: 'kurumsal.html' },
            { t: 'Referanslar', h: 'kurumsal.html#referanslar' },
            { t: 'Sertifikalar', h: 'kurumsal.html#sertifikalar' },
            { t: 'Müşteri Portalı', h: 'https://negsservice.com' },
          ]} />

          {/* İletişim */}
          <div>
            <div className="mono" style={{ fontSize: 10, color: '#e65100', letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 18, fontWeight: 600 }}>İletişim</div>
            <a href="tel:+905425725417" style={{ display: 'block', color: '#334155', fontSize: 13, lineHeight: 1.6, marginBottom: 4, textDecoration: 'none', fontWeight: 600 }}>+(90) 542 572 54 17</a>
            <a href="tel:+905322556744" style={{ display: 'block', color: '#334155', fontSize: 13, lineHeight: 1.6, marginBottom: 8, textDecoration: 'none', fontWeight: 600 }}>+(90) 532 255 67 44</a>
            <a href="mailto:bilgi@negs.com.tr" style={{ display: 'block', color: '#334155', fontSize: 13, lineHeight: 1.6, marginBottom: 8, textDecoration: 'none' }}>bilgi@negs.com.tr</a>
            <div style={{ color: '#52525B', fontSize: 12, lineHeight: 1.55, marginTop: 12 }}>Sedir Mah. Zambak Cad. No:47/B<br />Muratpaşa / Antalya</div>
          </div>
        </div>

        {/* Bottom bar */}
        <div style={{
          borderTop: '1px solid rgba(15,36,69,0.10)', paddingTop: 20,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          flexWrap: 'wrap', gap: 16,
          position: 'relative', zIndex: 2,
        }}>
          <div className="mono" style={{ fontSize: 11, color: '#64748B', letterSpacing: '0.1em' }}>
            © 2026 NEGS TECH ENERJİ VE SANAYİ LTD. ŞTİ — Tüm hakları saklıdır
          </div>
          <div style={{ display: 'flex', gap: 20 }}>
            <a href="gizlilik.html" className="mono" style={{ fontSize: 11, color: '#64748B', letterSpacing: '0.1em', textDecoration: 'none' }}>GİZLİLİK</a>
            <a href="gizlilik.html#kvkk" className="mono" style={{ fontSize: 11, color: '#64748B', letterSpacing: '0.1em', textDecoration: 'none' }}>KVKK</a>
            <a href="gizlilik.html#cerez" className="mono" style={{ fontSize: 11, color: '#64748B', letterSpacing: '0.1em', textDecoration: 'none' }}>ÇEREZ</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function V2FooterCol({ title, links }) {
  return (
    <div>
      <div className="mono" style={{ fontSize: 10, color: '#e65100', letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 18, fontWeight: 600 }}>{title}</div>
      {links.map((l, i) => (
        <a key={i} href={l.h || '#'} style={{
          display: 'block', color: '#334155', fontSize: 13, textDecoration: 'none',
          marginBottom: 10, lineHeight: 1.5, transition: 'color 120ms ease',
        }}
          onMouseEnter={e => e.currentTarget.style.color = '#e65100'}
          onMouseLeave={e => e.currentTarget.style.color = '#334155'}
        >{l.t || l}</a>
      ))}
    </div>
  );
}

Object.assign(window, { V2Nav, V2Hero, V2TrustBand, V2Services, V2Industries, V2CTABand, V2Footer });
