/* eslint-disable */
/* Light-theme Sections */

function SolutionsSection() {
  // 2026-05-11: Sektör görselleri premium stok fotoğraflara güncellendi
  // Eski interactive sektör seçici yedeği: Sections.jsx.bak-pre-pankajux
  const industries = [
    { tag: '01', name: 'Üretim & Fabrika',     img: 'assets/sector-circuit.jpg'    },
    { tag: '02', name: 'Veri Merkezi & IT',    img: 'assets/sector-network.jpg'    },
    { tag: '03', name: 'Hastane & Sağlık',     img: 'assets/sector-health.jpg'     },
    { tag: '04', name: 'Telekom & 5G',         img: 'assets/sector-microchip.jpg'  },
    { tag: '05', name: 'Otomotiv',             img: 'assets/sector-logistics.jpg'  },
    { tag: '06', name: 'Finans & Bankacılık',  img: 'assets/sector-finance.jpg'    },
  ];

  return (
    <section id="cozumler" className="section" style={{ padding: '96px 56px', background: '#F3F4F0' }}>
      <div style={{ maxWidth: 1440, margin: '0 auto 56px', textAlign: 'center' }}>
        <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',
        display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 16,
      }}>
        {industries.map((s, i) => {
          const isOdd = i % 2 === 0;
          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.05)';
              }}
              onMouseLeave={e => {
                e.currentTarget.style.transform = 'none';
                const img = e.currentTarget.querySelector('img');
                if (img) img.style.transform = 'none';
              }}
            >
              <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 40%, rgba(15,36,69,0.9) 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: 16, fontWeight: 600, lineHeight: 1.2,
                }}>{s.name}</div>
              </div>
            </article>
          );
        })}
      </div>
    </section>
  );
}

function CalculatorSection() {
  const [loads, setLoads] = React.useState([
    { id: 1, name: 'Server rack', count: 12, w: 4000 },
    { id: 2, name: 'Network switch', count: 8, w: 350 },
    { id: 3, name: 'Klima (soğutma)', count: 2, w: 8000 },
  ]);
  const [runtime, setRuntime] = React.useState(15);
  const [redundancy, setRedundancy] = React.useState('N+1');
  const [pf, setPf] = React.useState(0.9);

  const totalW = loads.reduce((a, l) => a + l.count * l.w, 0);
  const totalKW = totalW / 1000;
  const totalKVA = totalKW / pf;

  const redFactor = { 'N': 1.0, 'N+1': 1.2, '2N': 2.0 }[redundancy];
  const suggestedKVA = Math.ceil((totalKVA * 1.25 * redFactor) / 5) * 5;

  const pickModel = () => {
    const models = [80, 120, 160, 200];
    for (const m of models) {
      if (m >= suggestedKVA) return { kva: m, parallel: 1 };
    }
    for (let p = 2; p <= 8; p++) {
      if (200 * p >= suggestedKVA) return { kva: 200, parallel: p };
    }
    return { kva: 200, parallel: 8 };
  };
  const pick = pickModel();

  const updateLoad = (id, patch) => setLoads(loads.map(l => l.id === id ? { ...l, ...patch } : l));
  const addLoad = () => setLoads([...loads, { id: Date.now(), name: 'Yeni yük', count: 1, w: 1000 }]);
  const removeLoad = (id) => setLoads(loads.filter(l => l.id !== id));

  return (
    <section id="hesaplayici" className="section" style={{ padding: '160px 48px', background: '#F3F4F0' }}>
      <div className="container">
        <div style={{ marginBottom: 72 }}>
          <div className="eyebrow eyebrow--cyan" style={{ marginBottom: 16 }}>04 · Hesaplayıcı</div>
          <h2 className="display" style={{ fontSize: 'clamp(48px, 6vw, 96px)', maxWidth: 1100 }}>
            Yükünüzü girin.<br />
            <span style={{ color: '#e65100' }}>Doğru kapasiteyi önerelim.</span>
          </h2>
          <p style={{ color: '#334155', fontSize: 17, lineHeight: 1.6, fontWeight: 400, marginTop: 24, maxWidth: 640 }}>
            Mühendislerimizin saha formülünü web'e taşıdık. Çıkan sonuç ön görüş içindir, nihai proje için ekibimizle iletişime geçin.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 24 }}>
          <div style={{ border: '1px solid #E5E7EB', borderRadius: 10, background: '#FFFFFF', overflow: 'hidden', boxShadow: '0 1px 2px rgba(15,36,69,0.04)' }}>
            <div style={{ padding: '20px 28px', borderBottom: '1px solid #EAEAE3', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div className="eyebrow">Yük listesi</div>
              <button onClick={addLoad} style={{ padding: '6px 12px', border: '1px solid #CBD5E1', borderRadius: 4, background: '#FAFAF7', color: '#0f2445', fontSize: 12, cursor: 'pointer', fontFamily: 'var(--font-body)' }}>+ Yük ekle</button>
            </div>
            <div>
              <div className="yuk-header-row" style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 40px', gap: 0, padding: '12px 28px', borderBottom: '1px solid #EAEAE3', background: '#FAFAF7' }}>
                {['Cihaz', 'Adet', 'W / cihaz', 'Toplam', ''].map(h => (
                  <div key={h} className="eyebrow" style={{ fontSize: 10 }}>{h}</div>
                ))}
              </div>
              {loads.map(l => (
                <div key={l.id} style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 40px', gap: 0, padding: '12px 28px', borderBottom: '1px solid #EAEAE3', alignItems: 'center' }}>
                  <input value={l.name} onChange={e => updateLoad(l.id, { name: e.target.value })} style={calcInputStyle} />
                  <input type="number" value={l.count} onChange={e => updateLoad(l.id, { count: Number(e.target.value) || 0 })} style={{ ...calcInputStyle, fontFamily: 'var(--font-mono)' }} />
                  <input type="number" value={l.w} onChange={e => updateLoad(l.id, { w: Number(e.target.value) || 0 })} style={{ ...calcInputStyle, fontFamily: 'var(--font-mono)' }} />
                  <div className="mono" style={{ color: '#0891B2', fontSize: 13 }}>{((l.count * l.w) / 1000).toFixed(1)} kW</div>
                  <button onClick={() => removeLoad(l.id)} style={{ background: 'transparent', border: 'none', color: '#94A3B8', cursor: 'pointer', fontSize: 16 }}>×</button>
                </div>
              ))}
            </div>

            <div style={{ padding: 28, background: '#FAFAF7', borderTop: '1px solid #EAEAE3', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28 }}>
              <div>
                <div className="eyebrow" style={{ marginBottom: 10 }}>Yedek süresi</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <input type="range" min="5" max="60" step="5" value={runtime} onChange={e => setRuntime(Number(e.target.value))} style={{ flex: 1, accentColor: '#e65100' }} />
                  <div className="mono" style={{ fontSize: 14, color: '#0f2445', minWidth: 48 }}>{runtime} dk</div>
                </div>
              </div>
              <div>
                <div className="eyebrow" style={{ marginBottom: 10 }}>Redundancy</div>
                <div style={{ display: 'flex', gap: 4 }}>
                  {['N', 'N+1', '2N'].map(r => (
                    <button key={r} onClick={() => setRedundancy(r)} style={{
                      flex: 1, padding: '8px 12px', border: `1px solid ${redundancy === r ? '#e65100' : '#CBD5E1'}`,
                      background: redundancy === r ? 'rgba(230,81,0,0.08)' : '#FFFFFF',
                      color: redundancy === r ? '#0f2445' : '#64748B',
                      borderRadius: 4, fontSize: 12, cursor: 'pointer', fontFamily: 'var(--font-mono)',
                    }}>{r}</button>
                  ))}
                </div>
              </div>
              <div>
                <div className="eyebrow" style={{ marginBottom: 10 }}>Yük güç faktörü</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <input type="range" min="0.7" max="1.0" step="0.05" value={pf} onChange={e => setPf(Number(e.target.value))} style={{ flex: 1, accentColor: '#e65100' }} />
                  <div className="mono" style={{ fontSize: 14, color: '#0f2445', minWidth: 48 }}>{pf.toFixed(2)}</div>
                </div>
              </div>
            </div>
          </div>

          <div style={{ border: '1px solid #E5E7EB', borderRadius: 10, background: '#FFFFFF', padding: 36, position: 'relative', overflow: 'hidden', boxShadow: '0 1px 2px rgba(15,36,69,0.04)' }}>
            <div style={{ position: 'absolute', top: -80, right: -80, width: 300, height: 300, borderRadius: '50%', background: 'radial-gradient(circle, rgba(230,81,0,0.12) 0%, transparent 60%)' }} />
            <div className="eyebrow eyebrow--accent" style={{ marginBottom: 18 }}>Öneri</div>

            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 6 }}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 96, fontWeight: 600, letterSpacing: '-0.04em', color: '#0f2445', lineHeight: 0.95 }}>{suggestedKVA}</div>
              <div className="mono" style={{ fontSize: 18, color: '#64748B' }}>kVA</div>
            </div>
            <div className="mono" style={{ fontSize: 12, color: '#94A3B8', marginBottom: 32 }}>önerilen toplam kapasite</div>

            <div style={{ padding: 20, border: '1px solid #e65100', borderRadius: 6, background: 'rgba(230,81,0,0.05)', marginBottom: 20 }}>
              <div className="eyebrow eyebrow--accent" style={{ marginBottom: 10 }}>Önerilen model</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, flexWrap: 'wrap' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 600, color: '#0f2445', whiteSpace: 'nowrap' }}>VEGA {pick.kva}</div>
                {pick.parallel > 1 && <div className="mono" style={{ fontSize: 13, color: '#e65100', whiteSpace: 'nowrap' }}>× {pick.parallel} paralel</div>}
              </div>
              <div style={{ fontSize: 13, color: '#334155', marginTop: 8 }}>Toplam {pick.kva * pick.parallel} kVA kapasite</div>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 24 }}>
              <CalcRow l="Yük toplamı" v={`${totalKW.toFixed(1)} kW · ${totalKVA.toFixed(1)} kVA`} />
              <CalcRow l="Redundancy" v={`${redundancy} · ×${redFactor}`} />
              <CalcRow l="Headroom" v="+%25 emniyet" />
              <CalcRow l="Yedek süresi" v={`${runtime} dk @ nominal`} />
            </div>

            <a href="#iletisim" className="btn btn--primary" style={{ width: '100%', justifyContent: 'center' }}>Mühendisle görüş →</a>
          </div>
        </div>
      </div>
    </section>
  );
}

const calcInputStyle = {
  background: 'transparent', border: 'none', color: '#0f2445', fontSize: 14,
  fontFamily: 'var(--font-body)', padding: '4px 0', outline: 'none', width: '90%',
};

function CalcRow({ l, v }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 0', borderBottom: '1px solid #EAEAE3' }}>
      <div style={{ fontSize: 12, color: '#64748B' }}>{l}</div>
      <div className="mono" style={{ fontSize: 13, color: '#0f2445' }}>{v}</div>
    </div>
  );
}

function CompanySection() {
  return (
    <section id="kurumsal" className="section" style={{ padding: '160px 48px', background: '#FAFAF7' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 96, alignItems: 'center' }}>
          <div>
            <div className="eyebrow eyebrow--accent" style={{ marginBottom: 16 }}>06 · Kurumsal</div>
            <h2 className="display" style={{ fontSize: 'clamp(48px, 6vw, 96px)', marginBottom: 32 }}>
              <span style={{ color: '#94A3B8' }}>1984'te başladık.</span><br />
              2024'te yenilendik.<br />
              Disiplin aynı.
            </h2>
            <p style={{ color: '#334155', fontSize: 17, lineHeight: 1.7, fontWeight: 400, marginBottom: 20 }}>
              Nuray Elektrik, 40 yıl boyunca Türkiye'nin en kritik tesislerine güç elektroniği üretti.
              2024'te kurulan <span style={{ color: '#0f2445', fontWeight: 600 }}>NEGS Tech</span>, bu mühendislik mirasını yeni nesil
              online UPS mimarisine taşıyor.
            </p>
            <p style={{ color: '#334155', fontSize: 17, lineHeight: 1.7, fontWeight: 400, marginBottom: 40 }}>
              Antalya merkezli mühendislik. 10 yıl yedek parça taahhüdü, 24/7 saha servisi,
              uzaktan izleme ve önleyici bakım. Her şey aynı çatı altında.
            </p>
            <div style={{ display: 'flex', gap: 12 }}>
              <a href="#" className="btn btn--ghost">Şirket profili (PDF)</a>
              <a href="#" className="btn btn--link">Sertifikalar →</a>
            </div>
          </div>

          <div style={{ position: 'relative', paddingLeft: 32 }}>
            <div style={{ position: 'absolute', left: 0, top: 20, bottom: 20, width: 2, background: 'linear-gradient(180deg, #CBD5E1 0%, #e65100 50%, #0891B2 100%)' }} />
            {[
              { y: '1984', t: 'Nuray Elektrik kuruldu', d: 'Antalya merkezli güç elektroniği üretimi başladı.' },
              { y: '1998', t: 'İlk online UPS hattı', d: '20–40 kVA kapasite aralığında hastane ve banka tesislerine.' },
              { y: '2012', t: '3-seviyeli IGBT geçişi', d: 'Tam teşekküllü yeni nesil topoloji ile verim ve güvenilirlikte sıçrama.' },
              { y: '2024', t: 'NEGS Tech', d: 'Yeni marka, yeni ekip, yeni fabrika. VEGA Serisi piyasaya sunuldu.' },
              { y: '2026', t: 'Şu an', d: '6.000+ saha kurulum. 247 aktif izlemeli sistem.' },
            ].map((e, i) => (
              <div key={i} style={{ position: 'relative', marginBottom: 32 }}>
                <div style={{ position: 'absolute', left: -38, top: 4, width: 12, height: 12, borderRadius: 999, background: i === 4 ? '#e65100' : '#FFFFFF', border: `2px solid ${i === 4 ? '#e65100' : '#CBD5E1'}`, animation: i === 4 ? 'pulse-online 2s infinite' : 'none' }} />
                <div className="mono" style={{ fontSize: 12, color: i === 4 ? '#e65100' : '#64748B', letterSpacing: '0.08em', marginBottom: 6 }}>{e.y}</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 600, color: '#0f2445', marginBottom: 6, letterSpacing: '-0.01em' }}>{e.t}</div>
                <div style={{ fontSize: 14, color: '#334155', lineHeight: 1.5, fontWeight: 400 }}>{e.d}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function MapSection() {
  const ref = React.useRef(null);
  const NEGS = [36.8841, 30.7056]; // Sedir Mah., Muratpaşa, Antalya (yaklaşık)

  React.useEffect(() => {
    if (!ref.current || !window.L || ref.current._leaflet_id) return;

    const isMobile = window.innerWidth <= 768;
    const map = window.L.map(ref.current, {
      center: isMobile ? [37.8, 32] : [38, 33],
      zoom: isMobile ? 5 : 6,
      scrollWheelZoom: false,
      zoomControl: !isMobile,
      attributionControl: false,
      tap: true,
      dragging: !isMobile ? true : false,
      touchZoom: false,
      doubleClickZoom: false,
    });

    window.L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
      subdomains: 'abcd',
      maxZoom: 19,
    }).addTo(map);

    // C — Servis çemberleri (50/200/1000km)
    [
      { r: 50000,   op: 0.8, fop: 0.10, label: '50 km' },
      { r: 200000,  op: 0.6, fop: 0.06, label: '200 km' },
      { r: 1000000, op: 0.35,fop: 0.03, label: '1000 km' },
    ].forEach(c => {
      window.L.circle(NEGS, {
        radius: c.r,
        color: '#e65100',
        weight: 1.5,
        opacity: c.op,
        fillColor: '#e65100',
        fillOpacity: c.fop,
      }).addTo(map);
    });

    const icon = window.L.divIcon({
      className: 'negs-pin',
      html: `
        <div style="position:relative;width:36px;height:48px;">
          <div style="position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,rgba(230,81,0,0.35) 0%,transparent 70%);animation:pulsePin 2.2s ease-out infinite;"></div>
          <svg viewBox="0 0 24 32" width="36" height="48" style="position:relative;display:block;filter:drop-shadow(0 6px 12px rgba(230,81,0,0.5));">
            <path fill="#e65100" d="M12 0C5.4 0 0 5.4 0 12c0 9 12 20 12 20s12-11 12-20C24 5.4 18.6 0 12 0z"/>
            <circle fill="#fff" cx="12" cy="12" r="5"/>
          </svg>
        </div>`,
      iconSize: [36, 48], iconAnchor: [18, 44], popupAnchor: [0, -40],
    });

    window.L.marker(NEGS, { icon }).addTo(map)
      .bindPopup(`
        <div style="font-family:var(--font-body);min-width:200px;">
          <div style="font-weight:600;color:#0f2445;margin-bottom:4px;">NEGS Tech Güç Sistemleri</div>
          <div style="color:#475569;font-size:13px;line-height:1.5;">
            Sedir Mah. Zambak Cad. No:47/B<br/>
            Muratpaşa / Antalya
          </div>
          <a href="https://www.google.com/maps/search/?api=1&query=Sedir+Mah+Zambak+Cad+47B+Muratpa%C5%9Fa+Antalya"
             target="_blank" rel="noopener"
             style="display:inline-block;margin-top:8px;color:#e65100;font-weight:600;text-decoration:none;font-size:13px;">
            Yol tarifi al →
          </a>
        </div>
      `);

    return () => map.remove();
  }, []);

  return (
    <section className="section" id="iletisim-harita" style={{ background: '#FAFAF7' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 48, alignItems: 'stretch' }}>
          <div>
            <div className="eyebrow eyebrow--accent" style={{ marginBottom: 16 }}>— Konum</div>
            <h2 className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 56px)', marginBottom: 20 }}>
              Antalya merkez,<br/>81 ile servis.
            </h2>
            <p style={{ fontSize: 16, color: '#475569', lineHeight: 1.6, marginBottom: 28, maxWidth: 460 }}>
              Merkez ofis Muratpaşa'da. Türkiye genelinde saha ekibi
              7/24 müdahale için hazır.
            </p>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <InfoRow l="Adres">
                Sedir Mah. Zambak Cad. No:47/B<br/>Muratpaşa / Antalya
              </InfoRow>
              <InfoRow l="Telefon">
                <a href="tel:+905425725417" style={{ display: 'block', color: '#0f2445', textDecoration: 'none', fontWeight: 600 }}>+(90) 542 572 54 17</a>
                <a href="tel:+905322556744" style={{ display: 'block', color: '#0f2445', textDecoration: 'none', fontWeight: 500, marginTop: 2 }}>+(90) 532 255 67 44</a>
              </InfoRow>
              <InfoRow l="E-posta"><a href="mailto:info@negstech.com" style={{ color: '#0f2445', textDecoration: 'none', fontWeight: 500 }}>info@negstech.com</a></InfoRow>
              <InfoRow l="Çalışma saatleri">Pzt–Cum 08:30–18:00<br/>Acil servis 7/24</InfoRow>
            </div>

            <a href="https://www.google.com/maps/search/?api=1&query=Sedir+Mah+Zambak+Cad+47B+Muratpa%C5%9Fa+Antalya"
               target="_blank" rel="noopener"
               className="btn btn--primary"
               style={{ marginTop: 32 }}>
              Yol tarifi al <span>→</span>
            </a>
          </div>

          <div className="map-shell" style={{
            position: 'relative',
            borderRadius: 18, overflow: 'hidden',
            minHeight: 480, height: '100%',
            boxShadow: '0 30px 60px -20px rgba(15,36,69,0.25), 0 0 0 1px rgba(15,36,69,0.06)',
            background: '#e8edf2',
          }}>
            <div ref={ref} className="map-canvas" style={{ width: '100%', height: '100%', minHeight: 480 }} />
          </div>
        </div>
      </div>

      <style>{`
        @keyframes pulsePin {
          0%   { transform: translate(-50%,-50%) scale(0.6); opacity: 0.9; }
          100% { transform: translate(-50%,-50%) scale(1.4); opacity: 0; }
        }
        .leaflet-container { font-family: var(--font-body); }
        .leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: 0 12px 30px -10px rgba(15,36,69,0.25); }
        .leaflet-popup-tip { box-shadow: 0 4px 10px -4px rgba(15,36,69,0.2); }
      `}</style>
    </section>
  );
}

function InfoRow({ l, children }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '120px 1fr', gap: 16, paddingBottom: 14, borderBottom: '1px solid #EAEAE3' }}>
      <div className="mono" style={{ fontSize: 11, color: '#94A3B8', letterSpacing: '0.12em', textTransform: 'uppercase', paddingTop: 2 }}>{l}</div>
      <div style={{ fontSize: 15, color: '#334155', lineHeight: 1.5 }}>{children}</div>
    </div>
  );
}

function ContactSection() {
  const [sent, setSent] = React.useState(false);
  const [form, setForm] = React.useState({ name: '', company: '', email: '', phone: '', kva: '', note: '' });

  const submit = (e) => {
    e.preventDefault();
    setSent(true);
  };

  return (
    <section id="iletisim" className="section" style={{ padding: '160px 48px', position: 'relative', overflow: 'hidden', background: '#FAFAF7' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 60% 60% at 80% 50%, rgba(230,81,0,0.08) 0%, transparent 60%)', pointerEvents: 'none' }} />

      <div className="container" style={{ position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 96, alignItems: 'flex-start' }}>
          <div>
            <div className="eyebrow eyebrow--accent" style={{ marginBottom: 16 }}>07 · İletişim</div>
            <h2 className="display" style={{ fontSize: 'clamp(48px, 6vw, 96px)', marginBottom: 32 }}>
              Sahaya çıkalım.
            </h2>
            <p style={{ color: '#334155', fontSize: 17, lineHeight: 1.6, fontWeight: 400, marginBottom: 48, maxWidth: 440 }}>
              Yük profiliniz, tesis çizimleriniz veya mevcut UPS probleminizle başvurun.
              Mühendis ekibimiz 48 saat içinde ön görüş ile döner.
            </p>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 24, marginBottom: 48 }}>
              {[
                { l: 'Satış', v: 'satis@negstech.com', t: '+90 (242) 000 00 01' },
                { l: '7/24 saha servis', v: 'servis@negstech.com', t: '+90 (532) 000 00 02' },
                { l: 'Merkez ofis', v: 'Antalya', t: 'Türkiye Cumhuriyeti' },
              ].map((c, i) => (
                <div key={i} style={{ paddingLeft: 20, borderLeft: '2px solid #CBD5E1' }}>
                  <div className="eyebrow" style={{ marginBottom: 8 }}>{c.l}</div>
                  <div style={{ color: '#0f2445', fontSize: 15, fontWeight: 500, marginBottom: 4 }}>{c.v}</div>
                  <div className="mono" style={{ fontSize: 12, color: '#64748B' }}>{c.t}</div>
                </div>
              ))}
            </div>

            <div style={{ padding: '16px 20px', border: '1px solid #E5E7EB', borderRadius: 6, background: '#FFFFFF', display: 'flex', alignItems: 'center', gap: 12 }}>
              <div className="status-dot status-dot--online" />
              <div className="mono" style={{ fontSize: 12, color: '#334155' }}>Saha ekibi şu an aktif · 3 mühendis nöbette</div>
            </div>
          </div>

          <div style={{ border: '1px solid #E5E7EB', borderRadius: 10, background: '#FFFFFF', padding: 40, boxShadow: '0 1px 2px rgba(15,36,69,0.04)' }}>
            {sent ? (
              <div style={{ textAlign: 'center', padding: '60px 20px' }}>
                <div style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 64, height: 64, borderRadius: 999, background: 'rgba(16,185,129,0.08)', border: '1px solid #10B981', marginBottom: 24 }}>
                  <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#10B981" strokeWidth="2"><path d="M4 12l5 5L20 6" /></svg>
                </div>
                <h3 className="display" style={{ fontSize: 32, marginBottom: 12 }}>Talebiniz alındı.</h3>
                <p style={{ color: '#334155', fontSize: 15, lineHeight: 1.6, maxWidth: 400, margin: '0 auto' }}>
                  48 saat içinde mühendis ekibimizden ön görüş ile döneceğiz. Teşekkürler.
                </p>
                <button onClick={() => { setSent(false); setForm({ name: '', company: '', email: '', phone: '', kva: '', note: '' }); }} className="btn btn--ghost" style={{ marginTop: 32 }}>Yeni talep</button>
              </div>
            ) : (
              <form onSubmit={submit}>
                <div className="eyebrow" style={{ marginBottom: 24 }}>Teklif formu</div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, marginBottom: 20 }}>
                  <Field label="Ad Soyad *" value={form.name} onChange={v => setForm({ ...form, name: v })} />
                  <Field label="Şirket *" value={form.company} onChange={v => setForm({ ...form, company: v })} />
                  <Field label="E-posta *" type="email" value={form.email} onChange={v => setForm({ ...form, email: v })} />
                  <Field label="Telefon" type="tel" value={form.phone} onChange={v => setForm({ ...form, phone: v })} />
                </div>
                <div style={{ marginBottom: 20 }}>
                  <Field label="Tahmini kapasite" value={form.kva} onChange={v => setForm({ ...form, kva: v })} placeholder="örn. 120 kVA veya bilinmiyor" />
                </div>
                <div style={{ marginBottom: 28 }}>
                  <div className="eyebrow" style={{ marginBottom: 10 }}>Proje notu</div>
                  <textarea value={form.note} onChange={e => setForm({ ...form, note: e.target.value })} rows={4} style={{
                    width: '100%', background: '#FAFAF7', border: '1px solid #E5E7EB', borderRadius: 4,
                    padding: 14, color: '#0f2445', fontSize: 14, fontFamily: 'var(--font-body)',
                    outline: 'none', resize: 'vertical',
                  }} placeholder="Tesis türü, özel gereksinimler, proje zamanı..." />
                </div>
                <button type="submit" className="btn btn--primary" style={{ width: '100%', justifyContent: 'center' }}>Teklif talebini gönder →</button>
                <div style={{ marginTop: 20, fontSize: 11, color: '#94A3B8', lineHeight: 1.5 }}>
                  Bilgileriniz KVKK kapsamında işlenir. 3. kişilerle paylaşılmaz.
                </div>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function Field({ label, value, onChange, type = 'text', placeholder }) {
  return (
    <div>
      <div className="eyebrow" style={{ marginBottom: 8 }}>{label}</div>
      <input type={type} value={value} onChange={e => onChange(e.target.value)} placeholder={placeholder} style={{
        width: '100%', background: '#FAFAF7', border: '1px solid #E5E7EB', borderRadius: 4,
        padding: '12px 14px', color: '#0f2445', fontSize: 14, fontFamily: 'var(--font-body)',
        outline: 'none', transition: 'border-color 120ms ease',
      }}
        onFocus={e => e.currentTarget.style.borderColor = '#e65100'}
        onBlur={e => e.currentTarget.style.borderColor = '#E5E7EB'}
      />
    </div>
  );
}

Object.assign(window, { SolutionsSection, CalculatorSection, CompanySection, ContactSection });