/* 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 = [
    ['akilli-okul', 'Akıllı Okul'],
    ['hizmetler', 'Hizmetler'],
    ['hakkimizda', 'Hakkımızda'],
    ['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.jpg',
    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>
  );
}

// SMART SCHOOL — ürün tanıtım bandı
function SmartSchool() {
  const points = [
    'Tanımlı kart ve yetki kurallarına göre kontrollü giriş çıkış',
    'Her geçişin tarih, saat ve giriş noktasıyla kayda alınması',
    'Tanımlanan geçiş olaylarında veliye mobil bilgilendirme',
    'Canlı hareketlerin ve yetkilendirmelerin tek panelden yönetimi',
  ];

  return (
    <section className="kn-sec kn-sec-dark kn-product" id="akilli-okul">
      <div className="kn-sec-inner kn-product-grid">
        <div>
          <div className="kn-eyebrow fade-in">Ürün</div>
          <h2 className="kn-h2 on-dark fade-in" style={{ transitionDelay: '0.08s' }}>
            Okul Akıllı Geçiş Sistemi
          </h2>
          <p className="kn-sub on-dark fade-in" style={{ transitionDelay: '0.15s' }}>
            Turnike geçiş kontrolü, öğrenci ve personel takibi, veli bilgilendirmesi ve merkezi yönetimi
            tek platformda birleştiren okul çözümümüz. Okulunuza uygun kurulumu ve kullanım senaryolarını
            birlikte planlayabiliriz.
          </p>
          <ul className="kn-product-points fade-in" style={{ transitionDelay: '0.22s' }}>
            {points.map((point) => (
              <li key={point}>
                <window.IconCheck />
                <span>{point}</span>
              </li>
            ))}
          </ul>
          <div className="kn-product-actions fade-in" style={{ transitionDelay: '0.30s' }}>
            <a className="kn-btn-gold" href="hizmetler/okul-akilli-gecis-sistemleri.html">Sistemi İnceleyin</a>
          </div>
        </div>
        <div className="kn-product-media fade-in" style={{ transitionDelay: '0.24s' }}>
          <img
            src="assets/turnike-gecis.jpg"
            alt="Okul girişinde kartlı geçiş turnikesi"
            loading="lazy"
            decoding="async"
          />
        </div>
      </div>
    </section>
  );
}

// ABOUT
const APPROACH = [
  { step: '01', title: 'Keşif ve İhtiyaç Analizi', desc: 'Tesisin fiziki yapısı, yük profili ve kullanım senaryosu yerinde incelenir.' },
  { step: '02', title: 'Projelendirme', desc: 'Hesaplar, ekipman seçimi ve yetkilendirme senaryoları yönetmeliklere uygun şekilde planlanır.' },
  { step: '03', title: 'Uygulama ve Denetim', desc: 'Montaj, test ve devreye alma süreçleri mühendislik denetimiyle yürütülür.' },
  { step: '04', title: 'Teknik Destek', desc: 'Teslim sonrası bakım ve arıza süreçleri kayıtlı biçimde takip edilir.' },
];

function About() {
  return (
    <section className="kn-sec kn-sec-light" id="hakkimizda">
      <div className="kn-sec-inner kn-about-grid">
        <div>
          <div className="kn-eyebrow fade-in">Hakkımızda</div>
          <h2 className="kn-h2 on-light fade-in" style={{ transitionDelay: '0.08s' }}>
            Tek Muhatap, <em>Bütünlüklü Mühendislik</em>
          </h2>
          <div className="kn-about-body fade-in" style={{ transitionDelay: '0.15s' }}>
            <p>
              KASTAR Mühendislik, Elektrik Mühendisi Kaan Ciğer tarafından Samsun Atakum’da yürütülen
              bağımsız bir mühendislik pratiğidir. Elektrik projelendirme, otomasyon, zayıf akım ve
              geçiş kontrol sistemlerinde ihtiyaç analizinden devreye almaya kadar tüm aşamaları
              tek elden yürütüyoruz.
            </p>
            <p>
              Turnike, elektrik altyapısı, ağ ve yazılım tarafı çoğu projede farklı firmalara dağılır;
              bir aksaklık çıktığında sorumluluk da dağılır. Bu işlerin tamamını aynı mühendislik
              bütünlüğü içinde ele alıyor, kurulum sonrasında da aynı muhatap olarak kalıyoruz.
            </p>
          </div>
          <div className="kn-about-signature fade-in" style={{ transitionDelay: '0.22s' }}>
            <window.IconAward />
            <div>
              <strong>Kaan Ciğer</strong>
              <span>Elektrik Mühendisi · Atakum, Samsun</span>
            </div>
          </div>
        </div>
        <ol className="kn-approach-list">
          {APPROACH.map((item, i) => (
            <li key={item.step} className="kn-approach-item fade-in" style={{ transitionDelay: `${0.20 + i * 0.07}s` }}>
              <span className="kn-approach-step">{item.step}</span>
              <div>
                <strong>{item.title}</strong>
                <p>{item.desc}</p>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

const SERVICES = [
  { icon: <window.IconSettings />, title: 'Okul Akıllı Geçiş Sistemleri', href: 'hizmetler/okul-akilli-gecis-sistemleri.html', desc: 'Okullar için öğrenci, personel ve ziyaretçi giriş çıkışlarını kontrollü hale getiren kartlı geçiş, turnike ve raporlama odaklı akıllı güvenlik çözümleri.' },
  { 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 [consent, setConsent] = useStateNav(false);
  const [submitted, setSubmitted] = useStateNav(false);
  const [isSubmitting, setIsSubmitting] = useStateNav(false);
  const [error, setError] = useStateNav('');

  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' },
  ];

  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsSubmitting(true);
    setError('');

    try {
      const formData = new FormData();
      formData.append('access_key', '3e69f990-6481-404f-9aa3-4ccad7930987');
      formData.append('subject', 'Kastar Mühendislik Web Sitesi Teklif Formu');
      formData.append('from_name', 'Kastar Mühendislik Web Sitesi');
      // Web3Forms honeypot: bot doldurursa gönderim sunucu tarafında elenir.
      formData.append('botcheck', '');
      formData.append('name', form.name);
      formData.append('email', form.email);
      formData.append('phone', form.phone);
      formData.append('message', form.message);
      formData.append('Talep Kaynağı', 'Ana sayfa — Teklif formu');
      formData.append('KVKK Onayı', 'Aydınlatma metni okundu ve onaylandı');

      const response = await fetch('https://api.web3forms.com/submit', {
        method: 'POST',
        body: formData
      });

      const data = await response.json();

      if (data.success) {
        setSubmitted(true);
        setForm({ name: '', email: '', phone: '', message: '' });
        setConsent(false);
      } else {
        setError(data.message || 'Mesaj gönderilemedi. Lütfen tekrar deneyin.');
      }
    } catch (err) {
      setError('Mesaj gönderilirken bir hata oluştu. Lütfen tekrar deneyin.');
    } finally {
      setIsSubmitting(false);
    }
  };

  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={handleSubmit}>
                {/* htmlFor/id şart: etiket ile girdi kardeş olduğu için bağ kurulmazsa
                    ekran okuyucu alan adı yerine placeholder metnini okur. */}
                <div className="kn-form-row">
                  <div className="kn-form-field">
                    <label htmlFor="kn-ad-soyad">Ad Soyad</label>
                    <input id="kn-ad-soyad" name="name" autoComplete="name" required placeholder="Ahmet Yılmaz" value={form.name}
                           onChange={(e) => setForm({ ...form, name: e.target.value })} />
                  </div>
                  <div className="kn-form-field">
                    <label htmlFor="kn-eposta">E-posta</label>
                    <input id="kn-eposta" name="email" autoComplete="email" 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 htmlFor="kn-telefon">Telefon</label>
                  <input id="kn-telefon" name="phone" autoComplete="tel" 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 htmlFor="kn-mesaj">Mesajınız</label>
                  <textarea id="kn-mesaj" name="message" required placeholder="Projenizi kısaca açıklayın..." value={form.message}
                            onChange={(e) => setForm({ ...form, message: e.target.value })} />
                </div>
                <label className="kn-form-consent">
                  <input
                    type="checkbox"
                    required
                    checked={consent}
                    onChange={(e) => setConsent(e.target.checked)}
                  />
                  <span>
                    <a href="kvkk.html" target="_blank" rel="noopener noreferrer">KVKK Aydınlatma Metni</a>’ni
                    okudum; iletişim bilgilerimin talebimin değerlendirilmesi amacıyla işlenmesini onaylıyorum.
                  </span>
                </label>
                {error && (
                  <div className="kn-form-error" role="alert">
                    {error}
                  </div>
                )}
                <button type="submit" className="kn-form-submit" disabled={isSubmitting}>
                  {isSubmitting ? 'Gönderiliyor...' : '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>
        <nav className="kn-footer-links" aria-label="Yasal bilgiler">
          <a href="kvkk.html">KVKK Aydınlatma Metni</a>
          <a href="hizmetler/okul-akilli-gecis-sistemleri.html#sss">Sık Sorulan Sorular</a>
        </nav>
      </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, SmartSchool, About, Services, Certs, Contact, MapSection, Footer, WhatsAppButton });