/* eslint-disable */
/* global React */
const { useState: useStateNav, useEffect: useEffectNav, useRef: useRefNav } = React;

// NAV
function Nav({ mode, onToggleMode, onNav }) {
  const isDark = mode === 'dark';
  const [scrolled, setScrolled] = useStateNav(false);
  useEffectNav(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const links = [
    ['hizmetler', 'Hizmetler'],
    ['iletisim', 'İletişim'],
  ];
  return (
    <nav className={`kn-nav${scrolled ? ' kn-nav-scrolled' : ''}`}>
      <div className="kn-nav-inner">
        <div className="kn-nav-logo">
          {/* Logo switches automatically with the theme */}
          <img
            src={isDark ? "assets/kastarlogoo.png" : "assets/lightlogo.png"}
            alt="Kastar Mühendislik"
            className="kn-nav-logo-img"
          />
        </div>
        <div className="kn-nav-right">
          <ul className="kn-nav-links">
            {links.map(([id, lbl]) => (
              <li key={id}>
                <a href={`#${id}`} onClick={(e) => { e.preventDefault(); onNav?.(id); }}>{lbl}</a>
              </li>
            ))}
          </ul>

          {/* Theme toggle: sun = switch to light, moon = switch to dark */}
          <button
            className="kn-mode-toggle"
            onClick={onToggleMode}
            title={isDark ? 'Aydınlık moda geç' : 'Karanlık moda geç'}
            aria-label={isDark ? 'Aydınlık moda geç' : 'Karanlık moda geç'}
          >
            {isDark ? (
              /* Sun icon: visible in dark mode, click to go light */
              <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <circle cx="12" cy="12" r="5" />
                <line x1="12" y1="1"     x2="12" y2="3" />
                <line x1="12" y1="21"    x2="12" y2="23" />
                <line x1="4.22" y1="4.22"   x2="5.64" y2="5.64" />
                <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
                <line x1="1"  y1="12"    x2="3"  y2="12" />
                <line x1="21" y1="12"    x2="23" y2="12" />
                <line x1="4.22" y1="19.78"  x2="5.64" y2="18.36" />
                <line x1="18.36" y1="5.64"  x2="19.78" y2="4.22" />
              </svg>
            ) : (
              /* Moon icon: visible in light mode, click to go dark */
              <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
              </svg>
            )}
          </button>

          <button className="kn-btn-cta" onClick={() => onNav?.('iletisim')}>Teklif Al</button>
        </div>
      </div>
    </nav>
  );
}

// HERO
const HERO_SLIDES = [
  {
    src: 'assets/samsun.jpeg',
    alt: 'Atakum sahil manzarası',
  },
  {
    src: 'assets/anasayfa.png',
    alt: 'Kastar Mühendislik ana sayfa görseli',
  },
];

function Hero({ onPrimary, onSecondary }) {
  const [activeSlide, setActiveSlide] = useStateNav(0);
  const pointerStartX = useRefNav(null);
  const autoplayDelay = 5600;

  const goToSlide = (index) => {
    setActiveSlide((HERO_SLIDES.length + index) % HERO_SLIDES.length);
  };

  const goToNextSlide = () => {
    setActiveSlide((current) => (current + 1) % HERO_SLIDES.length);
  };

  const goToPreviousSlide = () => {
    setActiveSlide((current) => (current - 1 + HERO_SLIDES.length) % HERO_SLIDES.length);
  };

  useEffectNav(() => {
    const timer = window.setInterval(goToNextSlide, autoplayDelay);
    return () => window.clearInterval(timer);
  }, []);

  const handlePointerDown = (event) => {
    pointerStartX.current = event.clientX;
  };

  const handlePointerUp = (event) => {
    if (pointerStartX.current === null) return;

    const swipeDistance = event.clientX - pointerStartX.current;
    pointerStartX.current = null;

    if (Math.abs(swipeDistance) < 42) return;
    if (swipeDistance < 0) {
      goToNextSlide();
    } else {
      goToPreviousSlide();
    }
  };

  return (
    <div
      className="kn-hero"
      onPointerDown={handlePointerDown}
      onPointerUp={handlePointerUp}
      onPointerCancel={() => { pointerStartX.current = null; }}
    >
      <div className="kn-hero-slides" aria-hidden="true">
        {HERO_SLIDES.map((slide, index) => (
          <div
            key={slide.src}
            className={`kn-hero-slide${index === activeSlide ? ' is-active' : ''}`}
          >
            <img
              className="kn-hero-bg"
              src={slide.src}
              alt={slide.alt}
              loading={index === 0 ? 'eager' : 'lazy'}
              decoding="async"
            />
            <div className="kn-hero-slide-overlay" />
          </div>
        ))}
      </div>
      <div className="kn-hero-overlay" />
      <div className="kn-hero-inner">
        <h1 className="kn-hero-h1">
          Elektrik ve Otomasyon Sistemlerinde<br/>
          <em>Güvenilir Mühendislik Çözümleri</em>
        </h1>
        <div className="kn-hero-btns">
          <button className="kn-btn-gold" onClick={onPrimary}>Teklif Al</button>
          <button className="kn-btn-outline" onClick={onSecondary}>Hizmetlerimizi İncele</button>
        </div>
      </div>

      <button
        className="kn-hero-arrow kn-hero-arrow-prev"
        type="button"
        aria-label="Önceki görsel"
        onClick={goToPreviousSlide}
      >
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <polyline points="15 18 9 12 15 6" />
        </svg>
      </button>

      <button
        className="kn-hero-arrow kn-hero-arrow-next"
        type="button"
        aria-label="Sonraki görsel"
        onClick={goToNextSlide}
      >
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <polyline points="9 18 15 12 9 6" />
        </svg>
      </button>

      <div className="kn-hero-dots" aria-label="Hero görselleri">
        {HERO_SLIDES.map((slide, index) => (
          <button
            key={slide.src}
            className={`kn-hero-dot${index === activeSlide ? ' is-active' : ''}`}
            type="button"
            aria-label={`${index + 1}. görsele geç`}
            aria-current={index === activeSlide ? 'true' : 'false'}
            onClick={() => goToSlide(index)}
          />
        ))}
      </div>
    </div>
  );
}

const SERVICES = [
  { icon: <window.IconCpu />, title: 'Otomasyon ve Yazılım Entegrasyonu', href: 'hizmetler/otomasyon-ve-yazilim.html', desc: 'Akıllı yaşam ve bina teknolojileri kapsamında, sensör tabanlı otomasyon sistemleri ve yazılım entegrasyon çözümleri. Uzaktan kontrol, veri takibi ve otomasyon senaryoları ile entegre, akıllı sistemler geliştirilmesi.' },
  { icon: <window.IconBolt />, title: 'Elektrik Tesisatı ve Projelendirme', href: 'hizmetler/elektrik-tesisati-ve-projelendirme.html', desc: 'AG/YG elektrik tesislerinin projelendirilmesi, yük analizi, kompanzasyon ve kısa devre hesapları ile yönetmeliklere uygun mühendislik çözümleri.' },
  { icon: <window.IconActivity />, title: 'Topraklama Ölçüm ve Raporlama', href: 'hizmetler/topraklama-olcum-ve-raporlama.html', desc: 'Topraklama direnci ölçümleri, kaçak akım analizleri ve tesis uygunluk kontrolleri. Standartlara uygun detaylı raporlama ve iyileştirme önerileri.', hidden: true },
  { icon: <window.IconLayers />, title: 'Yüksek Gerilim İşletme Sorumluluğu', href: 'hizmetler/yuksek-gerilim-isletme-sorumlulugu.html', desc: 'YG tesislerinde işletme sorumluluğu, periyodik kontroller, kesici ve ayırıcı manevraları ile güvenli ve kesintisiz enerji yönetimi.' },
  { icon: <window.IconTool />, title: 'Saha Uygulama & Denetim & Teknik Danışmanlık', href: 'hizmetler/saha-uygulama-ve-denetim.html', desc: 'Projelerin sahada uygulanması, montaj kontrolü, test ve devreye alma süreçlerinin mühendislik denetimi ile eksiksiz teslimi.' },
  { icon: <window.IconSettings />, title: 'Zayıf Akım Sistemleri', href: 'hizmetler/zayif-akim-sistemleri.html', desc: 'CCTV, IP kamera, IPTV, yangın algılama ve güvenlik sistemleri, turnike ve otopark geçiş sistemlerinin mühendislik esaslı tasarım ve entegrasyonu.' },
];

function Services() {
  const visibleServices = SERVICES.filter((service) => !service.hidden);

  return (
    <section className="kn-sec kn-sec-dark" id="hizmetler">
      <div className="kn-sec-inner">
        <div className="kn-eyebrow fade-in">Hizmetler</div>
        <h2 className="kn-h2 on-dark fade-in" style={{ transitionDelay: '0.08s' }}>Uzmanlık Alanları</h2>
        <p className="kn-sub on-dark fade-in" style={{ transitionDelay: '0.15s' }}>Elektrik mühendisliğinin farklı disiplinlerinde kapsamlı çözümler sunuyoruz.</p>
        <div className={`kn-services-grid kn-services-grid-count-${visibleServices.length}`}>
          {visibleServices.map((s, i) => s.href ? (
            <a key={s.title} href={s.href} className="kn-svc-card kn-svc-card-link fade-in" style={{ transitionDelay: `${0.22 + i * 0.08}s` }}>
              <div className="kn-svc-icon">{s.icon}</div>
              <div className="kn-svc-title">{s.title}</div>
              <div className="kn-svc-desc">{s.desc}</div>
              <div className="kn-svc-more">Detayları Gör →</div>
            </a>
          ) : (
            <div key={s.title} className="kn-svc-card fade-in" style={{ transitionDelay: `${0.22 + i * 0.08}s` }}>
              <div className="kn-svc-icon">{s.icon}</div>
              <div className="kn-svc-title">{s.title}</div>
              <div className="kn-svc-desc">{s.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// CERTS
const CERTS = [
  { icon: <window.IconAward />, name: 'Elektrik Mühendisliği', org: '' },
  { icon: <window.IconShield />, name: 'Lisanslı Proje Müellifi', org: '' },
  { icon: <window.IconBook />, name: 'Teknik Destek', org: '' },
  { icon: <window.IconCheck />, name: 'Yönetmeliklere Uygunluk', org: '' },
];

function Certs() {
  return (
    <section className="kn-sec kn-sec-light" id="sertifikalar">
      <div className="kn-sec-inner">
        <div className="kn-eyebrow">Yetkinlikler</div>
        <h2 className="kn-h2 on-light">Sertifikalar &amp; Üyelikler</h2>
        <p className="kn-sub on-light">Mesleki yetkinlik ve standart uyum belgeleri.</p>
        <div className="kn-certs-grid">
          {CERTS.map((c) => (
            <div key={c.name} className="kn-cert-card">
              <div className="kn-cert-badge">{c.icon}</div>
              <div className="kn-cert-name">{c.name}</div>
              <div className="kn-cert-org">{c.org}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// BLOG
const BLOGS = [
  { cat: 'Otomasyon', title: 'Endüstriyel Tesislerde PLC Seçim Kriterleri', excerpt: 'Doğru PLC seçimi proje maliyetini ve esnekliğini doğrudan etkiler. Siemens, Allen-Bradley ve Mitsubishi karşılaştırması.', date: 'Mart 2025' },
  { cat: 'Enerji',    title: 'Enerji Tasarrufu için Reaktif Güç Kompanzasyonu', excerpt: 'Endüstriyel tesislerde reaktif güç kayıplarının azaltılması, kondansatör hesabı ve uygulama önerileri.', date: 'Ocak 2025' },
  { cat: 'Sensör',    title: 'Erişim Kontrol Sistemlerinde Sensör Teknolojileri', excerpt: 'IR, ultrasonik ve kızılötesi sensörlerin karşılaştırması; doğru uygulama için dikkat edilmesi gerekenler.', date: 'Kasım 2024' },
];

function Blog() {
  return (
    <section className="kn-sec kn-sec-dark" id="blog">
      <div className="kn-sec-inner">
        <div className="kn-eyebrow">Teknik Blog</div>
        <h2 className="kn-h2 on-dark">Yazılar &amp; Notlar</h2>
        <p className="kn-sub on-dark">Mühendislik uygulamaları üzerine teknik içerikler.</p>
        <div className="kn-blog-grid">
          {BLOGS.map((b) => (
            <div key={b.title} className="kn-blog-card">
              <div className="kn-blog-thumb">[görsel]</div>
              <div className="kn-blog-body">
                <div className="kn-blog-cat">{b.cat}</div>
                <div className="kn-blog-title">{b.title}</div>
                <div className="kn-blog-excerpt">{b.excerpt}</div>
                <div className="kn-blog-date">{b.date}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// CONTACT
function Contact() {
  const [form, setForm] = useStateNav({ name: '', email: '', phone: '', message: '' });
  const [submitted, setSubmitted] = useStateNav(false);

  const items = [
    { icon: <window.IconAward />, label: 'Yetkili', value: 'Kaan Ciğer\nElektrik Mühendisi' },
    { icon: <window.IconPhone />, label: 'Telefon', value: '+90 530 320 57 17' },
    { icon: <window.IconMail />, label: 'E-posta', value: 'kaan@kastarmuhendislik.com' },
    { icon: <window.IconPin />, label: 'Adres', value: 'Atakent Mahallesi 3110. Sokak No: 35/A\nAtakum / Samsun' },
  ];

  return (
    <section className="kn-sec kn-sec-light" id="iletisim">
      <div className="kn-sec-inner">
        <div className="kn-contact-grid">
          <div>
            <div className="kn-eyebrow fade-in">İletişim</div>
            <h2 className="kn-h2 on-light fade-in" style={{ transitionDelay: '0.08s' }}>Projenizi Konuşalım</h2>
            <p className="kn-sub on-light fade-in" style={{ transitionDelay: '0.15s' }}>Mühendislik ihtiyaçlarınız için ön görüşme ve teklif alın.</p>
            <div className="kn-contact-info">
              {items.map((ci, i) => (
                <div key={ci.label} className="kn-ci-item fade-in" style={{ transitionDelay: `${0.22 + i * 0.08}s` }}>
                  <div className="kn-ci-icon">{ci.icon}</div>
                  <div>
                    <div className="kn-ci-label">{ci.label}</div>
                    <div className="kn-ci-value">{ci.value}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div className="fade-in" style={{ paddingTop: 8, transitionDelay: '0.30s' }}>
            {submitted ? (
              <div className="kn-form-success">
                <div style={{ fontSize: 32, marginBottom: 12, color: 'var(--accent)' }}>✓</div>
                <div style={{ fontWeight: 700, color: 'var(--accent)', fontSize: 18, marginBottom: 6 }}>Mesajınız İletildi</div>
                <div className="kn-body-sm">En kısa sürede size dönüş yapılacaktır.</div>
              </div>
            ) : (
              <form className="kn-form" onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }}>
                <div className="kn-form-row">
                  <div className="kn-form-field">
                    <label>Ad Soyad</label>
                    <input required placeholder="Ahmet Yılmaz" value={form.name}
                           onChange={(e) => setForm({ ...form, name: e.target.value })} />
                  </div>
                  <div className="kn-form-field">
                    <label>E-posta</label>
                    <input required type="email" placeholder="ornek@mail.com" value={form.email}
                           onChange={(e) => setForm({ ...form, email: e.target.value })} />
                  </div>
                </div>
                <div className="kn-form-field">
                  <label>Telefon</label>
                  <input required type="tel" placeholder="+90 5xx xxx xx xx" value={form.phone}
                         onChange={(e) => setForm({ ...form, phone: e.target.value })} />
                </div>
                <div className="kn-form-field">
                  <label>Mesajınız</label>
                  <textarea required placeholder="Projenizi kısaca açıklayın..." value={form.message}
                            onChange={(e) => setForm({ ...form, message: e.target.value })} />
                </div>
                <button type="submit" className="kn-form-submit">Mesaj Gönder</button>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

// MAP
function MapSection() {
  const lat = 41.340641;
  const lng = 36.249790;
  return (
    <section className="kn-map" aria-label="Konum">
      <iframe
        title="Kastar Mühendislik Konumu"
        src={`https://www.google.com/maps?q=${lat},${lng}&hl=tr&z=16&output=embed`}
        width="100%"
        height="450"
        style={{ border: 0 }}
        allowFullScreen
        loading="lazy"
      />
      <a
        className="kn-map-link"
        href={`https://www.google.com/maps/dir/?api=1&destination=${lat},${lng}`}
        target="_blank"
        rel="noopener noreferrer external"
      >
        Yol Tarifi Al ↗
      </a>
    </section>
  );
}

// FOOTER
function Footer() {
  return (
    <footer className="kn-footer">
      <div className="kn-footer-inner">
        <div className="kn-footer-copy">© Kaan Ciğer, Kastar Mühendislik 2026</div>
      </div>
    </footer>
  );
}

// WHATSAPP BUTTON
function WhatsAppButton() {
  return (
    <a
      className="kn-wa-btn"
      href="https://wa.me/905303205717"
      target="_blank"
      rel="noopener noreferrer"
      aria-label="WhatsApp'tan Yaz"
    >
      <svg className="kn-wa-icon" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
      </svg>
      <span className="kn-wa-tooltip">WhatsApp'tan Yaz</span>
    </a>
  );
}

Object.assign(window, { Nav, Hero, Services, Certs, Contact, MapSection, Footer, WhatsAppButton });