/* Small atoms: icons, PromoBar, Navbar, Footer, mega menu data */

const Icon = {
  ChevronDown: (p) => (
    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <polyline points="6 9 12 15 18 9" />
    </svg>
  ),
  ArrowRight: (p) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" />
    </svg>
  ),
  Check: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <polyline points="20 6 9 17 4 12" />
    </svg>
  ),
  Sparkle: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" {...p}>
      <path d="M12 2l1.8 5.4L19 9l-5.2 1.6L12 16l-1.8-5.4L5 9l5.2-1.6L12 2z" />
    </svg>
  ),
  Bolt: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" {...p}>
      <path d="M13 2L3 14h7l-1 8 10-12h-7l1-8z" />
    </svg>
  ),
  Shield: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
    </svg>
  ),
  Mail: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <rect x="3" y="5" width="18" height="14" rx="2" /><polyline points="3 7 12 13 21 7" />
    </svg>
  ),
  Clock: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" />
    </svg>
  ),
  Phone: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" {...p}>
      <path d="M6.6 10.8a15 15 0 006.6 6.6l2.2-2.2a1 1 0 011-.2c1.1.4 2.4.6 3.6.6a1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.2.2 2.5.6 3.6a1 1 0 01-.2 1z" />
    </svg>
  ),
  WhatsApp: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" {...p}>
      <path d="M.06 24l1.7-6.2A11.9 11.9 0 1112 24a11.9 11.9 0 01-5.7-1.4L.06 24zm6.6-3.8c1.7 1 3.3 1.6 5.4 1.6 5.4 0 9.9-4.4 9.9-9.9S17.4 2 12 2 2.1 6.4 2.1 11.9c0 2 .5 3.8 1.5 5.3l.4.6-1 3.6 3.7-1z" />
    </svg>
  ),
  Cal: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <rect x="3" y="4" width="18" height="18" rx="2" /><line x1="16" y1="2" x2="16" y2="6" /><line x1="8" y1="2" x2="8" y2="6" /><line x1="3" y1="10" x2="21" y2="10" />
    </svg>
  ),
  Sgk: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M16 21v-2a4 4 0 00-4-4H6a4 4 0 00-4 4v2" />
      <circle cx="9" cy="7" r="4" />
      <path d="M22 21v-2a4 4 0 00-3-3.87" />
    </svg>
  ),
  Doc: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
      <polyline points="14 2 14 8 20 8" />
    </svg>
  ),
  Robot: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <rect x="3" y="8" width="18" height="12" rx="3" />
      <circle cx="8" cy="14" r="1.5" fill="currentColor" />
      <circle cx="16" cy="14" r="1.5" fill="currentColor" />
      <path d="M12 4v4" /><circle cx="12" cy="3" r="1" />
    </svg>
  ),
  Search: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
    </svg>
  ),
  Bell: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M18 8a6 6 0 00-12 0c0 7-3 9-3 9h18s-3-2-3-9" />
      <path d="M13.7 21a2 2 0 01-3.4 0" />
    </svg>
  ),
  Lightning: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" {...p}>
      <polygon points="13 2 3 14 11 14 9 22 21 10 13 10 13 2" />
    </svg>
  ),
  Play: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" {...p}>
      <polygon points="5 3 19 12 5 21 5 3" />
    </svg>
  ),
  VolumeUp: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
      <path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07" />
    </svg>
  ),
  VolumeMute: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
      <line x1="23" y1="9" x2="17" y2="15" /><line x1="17" y1="9" x2="23" y2="15" />
    </svg>
  ),
};

/* ---------- Logo — gerçek marka görseli ---------- */
function OfisimnetLogo({ height = 28 }) {
  return (
    <img
      src="assets/logo.png"
      alt="OfisimNet"
      style={{ height, width: "auto", display: "block" }}
    />
  );
}

/* ---------- Promo bar ---------- */
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 }}>
          <Icon.Sparkle style={{ color: "#fcd34d" }} />
          <span><strong>AL · Yapay Zekâ</strong> — WhatsApp'tan gelen faturayı 3 saniyede e-Faturaya çevir. <a href="#al">Demoyu izle →</a></span>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 16, opacity: .9 }}>
          <a href="tel:+905325600346" style={{ display: "inline-flex", alignItems: "center", gap: 6, color: "#fff", textDecoration: "none" }}><Icon.Phone /> 0532 560 03 46</a>
          <a href="mailto:iletisim@ofisimnet.com" style={{ display: "inline-flex", alignItems: "center", gap: 6, color: "#fff", textDecoration: "none" }}><Icon.Mail /> iletisim@ofisimnet.com</a>
        </div>
      </div>
    </div>
  );
}

/* ---------- Mega menu data ---------- */
const TAKIP_MODULES = [
  { title: "Beyanname Takibi", desc: "GİB e-Beyanname her gece otomatik çekme + PDF arsiv.", glyph: "B", bg: "#1e3a8a", href: "Modul Detay.html#beyanname-takibi" },
  { title: "E-Tebligat Sorgu", desc: "DVD üzerinden otomatik + manuel tek tık sorgu.", glyph: "T", bg: "#3558d4", href: "Modul Detay.html#e-tebligat-sorgu" },
  { title: "Vergi Borcu", desc: "DVD'den vergi borç detayı özel Türkiye.", glyph: "V", bg: "#0ba5ec", href: "Modul Detay.html#vergi-borcu-sorgu" },
  { title: "SGK Vizite", desc: "SGK Vizite Web Servisi — personel raporu sorgu/onay.", glyph: "S", bg: "#f59e0b", href: "Modul Detay.html#sgk-vizite" },
  { title: "Karşıt İnceleme", desc: "DVD'de mükellef adına talep var mı saatlik tarama.", glyph: "K", bg: "#ed7c3a", href: "Modul Detay.html#karsit-inceleme" },
  { title: "Mükellef Yönetimi", desc: "VKN, sektor, atama, rol bazlı yetki — hepsi tek panelde.", glyph: "M", bg: "#22c55e", href: "Modul Detay.html#mukellef-yonetimi" },
];
const URETIM_MODULES = [
  { title: "AL Fatura", desc: "WhatsApp foto / PDF → yapay zekâ → kalemler + KDV otomatik.", glyph: "AL", bg: "#ed7c3a", badge: "YENİ", href: "Modul Detay.html#al-ai-fatura" },
  { title: "e-Arşiv Fatura Kesme", desc: "GİB e-Arşiv portalı üzerinden tek tıkla kesim.", glyph: "F", bg: "#1e3a8a", href: "Modul Detay.html#e-arsiv-fatura" },
  { title: "Mikro ePortal", desc: "Mikro ePortal entegrasyonu — çoklu portal desteği.", glyph: "MP", bg: "#3558d4", href: "Modul Detay.html#mikro-eportal" },
  { title: "Zirve İçe Aktarım", desc: "Zirve DB veya Luca XML'den mükellef toplu içe alım.", glyph: "ZL", bg: "#0ba5ec", href: "Modul Detay.html#zirve-aktarim" },
  { title: "Görev & Ekip", desc: "Müşavir / asistan / gözlemci roller, Kanban panosu.", glyph: "GE", bg: "#22c55e", href: "Modul Detay.html#gorev-ekip" },
  { title: "WhatsApp Tahakkuk", desc: "Beyanname tahakkuk mesajı + PDF tek tıkla.", glyph: "W", bg: "#16a34a", href: "Modul Detay.html#whatsapp-tahakkuk" },
  { title: "Realtime Kontrol", desc: "Beyanname kontrol progress (gerçek zamanlı bağlantı).", glyph: "RT", bg: "#6d59ff", href: "Modul Detay.html#realtime-kontrol" },
  { title: "Arşiv & Raporlar", desc: "Geçmiş dönem PDF'leri arşivden görüntüle, indir, paylaş.", glyph: "AR", bg: "#f59e0b", href: "Modul Detay.html#arsiv-raporlar" },
];

function MegaMenu() {
  return (
    <div className="megamenu">
      <div className="mm-card">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 36 }}>
          <div>
            <p style={{ margin: 0, marginBottom: 12, fontSize: 11, fontWeight: 800, color: "var(--text-muted)", letterSpacing: ".08em", textTransform: "uppercase" }}>Ofiste Takip</p>
            <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
              {TAKIP_MODULES.map((m) => (
                <a key={m.title} href={m.href || "#"} className="mm-item">
                  <div className="mm-glyph" style={{ background: m.bg }}>{m.glyph}</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 14, fontWeight: 600, color: "var(--brand-500)" }}>{m.title}</div>
                    <div style={{ marginTop: 2, fontSize: 12, lineHeight: "16px", color: "var(--text-muted)" }}>{m.desc}</div>
                  </div>
                </a>
              ))}
            </div>
          </div>
          <div>
            <p style={{ margin: 0, marginBottom: 12, fontSize: 11, fontWeight: 800, color: "var(--text-muted)", letterSpacing: ".08em", textTransform: "uppercase" }}>Üretim & Otomasyon</p>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 2 }}>
              {URETIM_MODULES.map((m) => (
                <a key={m.title} href={m.href || "#"} className="mm-item">
                  <div className="mm-glyph" style={{ background: m.bg, fontSize: 10 }}>{m.glyph}</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ display: "flex", gap: 6, alignItems: "center", fontSize: 14, fontWeight: 600, color: "var(--brand-500)" }}>
                      {m.title}
                      {m.badge && <span style={{ fontSize: 10, fontWeight: 800, color: "var(--success-green)", background: "color-mix(in oklch, var(--success-green) 14%, white)", padding: "2px 6px", borderRadius: 4 }}>{m.badge}</span>}
                    </div>
                    <div style={{ marginTop: 2, fontSize: 12, lineHeight: "16px", color: "var(--text-muted)" }}>{m.desc}</div>
                  </div>
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- Navbar ---------- */
function Navbar() {
  return (
    <header style={{ position: "sticky", top: 0, zIndex: 100, background: "rgba(255,255,255,0.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" }}>
          <OfisimnetLogo height={30} />
        </a>

        <nav style={{ display: "flex", alignItems: "center", gap: 2 }} className="navnav">
          <a className="nav-link" href="/">Anasayfa</a>
          <div className="group-mm" style={{ position: "relative" }}>
            <button className="nav-link" style={{ background: "none", border: 0, cursor: "pointer", font: "inherit" }}>
              Takip Modülleri <Icon.ChevronDown />
            </button>
            <MegaMenu />
          </div>
          <a className="nav-link" href="Fiyatlar.html">Fiyatlar</a>
          <a className="nav-link" href="Hakkimizda.html">Hakkımızda</a>
          <a className="nav-link" href="SSS.html">SSS</a>
          <a className="nav-link" href="Iletisim.html">İletişim</a>
        </nav>

        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <a href="/login" className="nav-link" style={{ padding: "6px 6px" }}>Giriş</a>
          <a href="/kayit" className="kb-btn-primary" style={{ height: 34, padding: "0 14px" }}>
            14 gün ücretsiz dene
            <Icon.ArrowRight />
          </a>
        </div>
      </div>
      <style>{`
        @media (max-width: 1100px) { .navnav { display: none !important; } }
      `}</style>
    </header>
  );
}

/* ---------- Footer ---------- */
const FOOTER_COLS = [
  {
    h: "Modüller",
    items: ["Beyanname Takibi", "E-Tebligat Sorgu", "Vergi Borcu Sorgu", "SGK Vizite Rapor", "AL · AI Fatura Parse", "e-Arşiv Fatura Kesme"],
  },
  {
    h: "OfisimNet",
    items: ["Hakkımızda", "Fiyatlar", "Demo Talep Et", "İletişim"],
  },
  {
    h: "Kaynaklar",
    items: ["Yardım Merkezi", "Mevzuat Takvimi"],
  },
  {
    h: "Yasal",
    items: ["KVKK / Aydınlatma", "Gizlilik Politikası", "Çerez Politikası", "Kullanım Şartları", "Destek"],
  },
];

function Footer() {
  return (
    <footer style={{ background: "#fff" }}>
      <div className="container-kolaybi" style={{ paddingTop: 64, paddingBottom: 40 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr repeat(4, 1fr)", gap: 40 }} className="foot-grid">
          <div>
            <OfisimnetLogo height={30} />
            <p style={{ marginTop: 16, maxWidth: 320, fontSize: 13.5, lineHeight: "22px", color: "var(--text-muted)" }}>
              Mali müşavirin yardımcı muhasebe asistanı. Beyanname, e-tebligat,
              SGK, karşıt inceleme ve AI ile e-fatura — tek platformda.
            </p>
            <div style={{ marginTop: 18, display: "flex", flexDirection: "column", gap: 8, fontSize: 12.5, color: "var(--text-muted)" }}>
              <a href="tel:+905325600346" style={{ display: "inline-flex", alignItems: "center", gap: 8, color: "var(--text-muted)", fontWeight: 600 }}>
                <span style={{ width: 24, height: 24, borderRadius: 6, background: "color-mix(in oklch, var(--brand-500) 10%, white)", color: "var(--brand-500)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}><Icon.Phone /></span>
                0532 560 03 46
              </a>
              <a href="mailto:iletisim@ofisimnet.com" style={{ display: "inline-flex", alignItems: "center", gap: 8, color: "var(--text-muted)" }}>
                <span style={{ width: 24, height: 24, borderRadius: 6, background: "color-mix(in oklch, var(--brand-500) 10%, white)", color: "var(--brand-500)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}><Icon.Mail /></span>
                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, color: "var(--text-muted)", lineHeight: 1.5 }}>
                <span style={{ flexShrink: 0, width: 24, height: 24, borderRadius: 6, background: "color-mix(in oklch, var(--ai-purple) 12%, white)", color: "var(--ai-purple)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
                </span>
                <span>Küçük Kayaş Mah. Şehit Hanifi Mutlu Cad.<br/>Çelikler Apt. No: 61/F · Mamak / ANKARA</span>
              </a>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 8, marginTop: 4, fontSize: 12 }}>
                <Icon.Shield style={{ color: "var(--success-green)" }} /> KVKK · Türkiye'de hosted veri
              </span>
            </div>
          </div>
          {FOOTER_COLS.map((c) => (
            <div key={c.h}>
              <p className="col-h">{c.h}</p>
              {c.items.map((it) => <a key={it} href="#">{it}</a>)}
            </div>
          ))}
        </div>
      </div>
      <div style={{ borderTop: "1px solid var(--border-light)", background: "var(--bg-muted)" }}>
        <div className="container-kolaybi" style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12, padding: "20px 24px" }}>
          <p style={{ margin: 0, fontSize: 12, color: "var(--text-muted)" }}>© {new Date().getFullYear()} OfisimNet — Mali Müşavirin Yardımcı Asistanı</p>
          <p style={{ margin: 0, fontSize: 12, color: "var(--text-muted)" }}>Türkiye merkezli</p>
        </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, { Icon, OfisimnetLogo, PromoBar, Navbar, Footer });
