/* Shared chrome — PromoBar + Navbar + Footer for all marketing pages */

function PromoBar() {
  return (
    <div className="promo-bar">
      <div className="container-kolaybi" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 24px", gap: 12, flexWrap: "wrap" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <span style={{ color: "#fcd34d" }}>✦</span>
          <span><strong>AL · Yapay Zekâ</strong> — WhatsApp'tan gelen faturayı 3 saniyede e-Faturaya çevir. <a href="/#al" style={{ textDecoration: "underline" }}>Demoyu izle →</a></span>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 16, opacity: .9 }}>
          <a href="tel:+905325600346" style={{ color: "#fff", display: "inline-flex", alignItems: "center", gap: 6 }}>☎ 0532 560 03 46</a>
          <a href="mailto:iletisim@ofisimnet.com" style={{ color: "#fff", display: "inline-flex", alignItems: "center", gap: 6 }}>✉ iletisim@ofisimnet.com</a>
        </div>
      </div>
    </div>
  );
}

function Navbar({ active }) {
  return (
    <header style={{ position: "sticky", top: 0, zIndex: 100, background: "rgba(255,255,255,.92)", backdropFilter: "saturate(180%) blur(8px)", borderBottom: "1px solid var(--border-light)" }}>
      <div className="container-kolaybi" style={{ display: "flex", height: 56, alignItems: "center", justifyContent: "space-between", gap: 16 }}>
        <a href="/" style={{ display: "flex", alignItems: "center" }}>
          <img src="assets/logo.png" alt="OfisimNet" style={{ height: 30 }} />
        </a>
        <nav style={{ display: "flex", alignItems: "center", gap: 2 }} className="navnav">
          <a className={`nav-link ${active === "home" ? "active" : ""}`} href="/">Anasayfa</a>
          <a className={`nav-link ${active === "modules" ? "active" : ""}`} href="Modul Detay.html#beyanname-takibi">Takip Modülleri</a>
          <a className={`nav-link ${active === "fiyatlar" ? "active" : ""}`} href="Fiyatlar.html">Fiyatlar</a>
          <a className={`nav-link ${active === "hakkimizda" ? "active" : ""}`} href="Hakkimizda.html">Hakkımızda</a>
          <a className={`nav-link ${active === "sss" ? "active" : ""}`} href="SSS.html">SSS</a>
          <a className={`nav-link ${active === "iletisim" ? "active" : ""}`} href="Iletisim.html">İletişim</a>
        </nav>
        <div style={{ display: "flex", gap: 8 }}>
          <a href="/login" className="nav-link">Giriş</a>
          <a href="/kayit" className="kb-btn-primary" style={{ height: 34, padding: "0 14px" }}>14 gün ücretsiz dene →</a>
        </div>
      </div>
      <style>{`
        @media (max-width: 1100px) { .navnav { display: none !important; } }
      `}</style>
    </header>
  );
}

function Footer() {
  const cols = [
    {
      h: "Modüller",
      items: [
        { l: "Beyanname Takibi", h: "Modul Detay.html#beyanname-takibi" },
        { l: "E-Tebligat Sorgu", h: "Modul Detay.html#e-tebligat-sorgu" },
        { l: "Vergi Borcu Sorgu", h: "Modul Detay.html#vergi-borcu-sorgu" },
        { l: "SGK Vizite", h: "Modul Detay.html#sgk-vizite" },
        { l: "AL · AI Fatura", h: "Modul Detay.html#al-ai-fatura" },
        { l: "e-Arşiv Fatura", h: "Modul Detay.html#e-arsiv-fatura" },
      ],
    },
    {
      h: "OfisimNet",
      items: [
        { l: "Hakkımızda", h: "Hakkimizda.html" },
        { l: "Fiyatlar", h: "Fiyatlar.html" },
        { l: "SSS", h: "SSS.html" },
        { l: "İletişim", h: "Iletisim.html" },
        { l: "Demo Talep Et", h: "Iletisim.html#demo" },
      ],
    },
    {
      h: "Yasal",
      items: [
        { l: "KVKK / Aydınlatma", h: "#" },
        { l: "Gizlilik Politikası", h: "#" },
        { l: "Çerez Politikası", h: "#" },
        { l: "Kullanım Şartları", h: "#" },
      ],
    },
  ];
  return (
    <footer className="site-footer">
      <div className="container-kolaybi">
        <div style={{ display: "grid", gridTemplateColumns: "1.6fr repeat(3, 1fr)", gap: 40 }} className="foot-grid">
          <div>
            <span style={{ display: "inline-flex", padding: "6px 14px", background: "#fff", borderRadius: 10 }}>
              <img src="assets/logo.png" alt="OfisimNet" style={{ height: 28, display: "block" }} />
            </span>
            <p style={{ marginTop: 16, fontSize: 13.5, lineHeight: "22px", color: "rgba(255,255,255,.7)", maxWidth: 320 }}>
              Mali müşavirin yardımcı muhasebe asistanı. Beyanname, e-tebligat,
              SGK, karşıt inceleme ve AL ile fatura kesme — tek platformda.
            </p>
            <div style={{ marginTop: 18, display: "flex", flexDirection: "column", gap: 6, fontSize: 13 }}>
              <a href="tel:+905325600346" style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: 0 }}>☎ 0532 560 03 46</a>
              <a href="mailto:iletisim@ofisimnet.com" style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: 0 }}>✉ iletisim@ofisimnet.com</a>
              <a href="https://maps.google.com/?q=K%C3%BC%C3%A7%C3%BCk+Kaya%C5%9F+Mah.+%C5%9Eehit+Hanifi+Mutlu+Cad.+%C3%87elikler+Apt.+No+61+F+Mamak+Ankara" target="_blank" rel="noreferrer" style={{ display: "flex", gap: 8, padding: 0, lineHeight: 1.5 }}>
                📍 <span>Küçük Kayaş Mah. Şehit Hanifi Mutlu Cad. Çelikler Apt. No: 61/F · Mamak / ANKARA</span>
              </a>
            </div>
          </div>
          {cols.map((c) => (
            <div key={c.h}>
              <p className="col-h">{c.h}</p>
              {c.items.map((i) => <a key={i.l} href={i.h}>{i.l}</a>)}
            </div>
          ))}
        </div>
        <div className="site-footer-bottom">
          <span>© {new Date().getFullYear()} OfisimNet — Mali Müşavirin Yardımcı Asistanı</span>
          <span>Türkiye merkezli · KVKK uyumlu</span>
        </div>
      </div>
      <style>{`
        @media (max-width: 992px) { .foot-grid { grid-template-columns: 1fr 1fr !important; } }
        @media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </footer>
  );
}

Object.assign(window, { PromoBar, Navbar, Footer });