/* Realistic mockup components — fake screenshots of each module */

/* ─────────── Common app shell wrapper ─────────── */
function AppShell({ active, children }) {
  const NAV = [
    { id: "panel", t: "Panel", i: "▦" },
    { id: "beyanname", t: "Beyannameler", i: "📋" },
    { id: "mukellef", t: "Mükellefler", i: "👥" },
    { id: "tebligat", t: "E-Tebligat", i: "📬" },
    { id: "vergi", t: "Vergi Borcu", i: "💰" },
    { id: "sgk", t: "SGK Vizite", i: "🩺" },
    { id: "karsi", t: "Karşıt İnceleme", i: "🔍" },
    { id: "gorev", t: "Görevler", i: "✓" },
    { id: "fatura", t: "Fatura", i: "🧾" },
    { id: "whatsapp", t: "WhatsApp", i: "💬" },
  ];
  return (
    <div className="mock-window">
      <div className="mock-titlebar">
        <div className="mock-dots">
          <span style={{ background: "#ed6a5f" }} />
          <span style={{ background: "#f5bf4f" }} />
          <span style={{ background: "#62c553" }} />
        </div>
        <div className="mock-urlbar">🔒 ofisimnet.com</div>
      </div>
      <div style={{ display: "flex", minHeight: 540 }}>
        <div className="app-sidebar">
          <div className="logo">Ofisim<span className="accent">Net</span></div>
          {NAV.map((n) => (
            <div key={n.id} className={`nav-item ${n.id === active ? "active" : ""}`}>
              <span style={{ width: 16, textAlign: "center", fontSize: 13 }}>{n.i}</span>
              <span>{n.t}</span>
            </div>
          ))}
        </div>
        <div className="app-main">{children}</div>
      </div>
    </div>
  );
}

/* ─────────── 1. Beyanname Takibi mockup ─────────── */
function MockBeyanname() {
  const rows = [
    { v: "1234567890", m: "AHMET YÜKSEL", t: "KDV1", s: "tahakkuk", c: "green", a: "₺12.450,30", d: "26 Nis" },
    { v: "9876543210", m: "PARS KALİTE LTD.", t: "MUHSGK", s: "tahakkuk", c: "green", a: "₺48.230,00", d: "26 Nis" },
    { v: "5544332211", m: "OSMAN OKTAY", t: "GGECICI", s: "beklemede", c: "amber", a: "—", d: "17 May" },
    { v: "1122334455", m: "MAHMUT TEMIZSOY", t: "KDV1", s: "tahakkuk", c: "green", a: "₺3.892,40", d: "26 Nis" },
    { v: "6677889900", m: "ERHAN AKKURT", t: "GVK_94", s: "hatalı", c: "red", a: "—", d: "26 Nis" },
    { v: "4433221100", m: "SİBEL ÖZEN", t: "KDV1", s: "tahakkuk", c: "green", a: "₺21.000,00", d: "26 Nis" },
  ];
  return (
    <AppShell active="beyanname">
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 18 }}>
        <div>
          <div style={{ fontSize: 11, color: "var(--text-muted)", fontWeight: 700, letterSpacing: ".06em", textTransform: "uppercase" }}>Modül</div>
          <h3 style={{ fontSize: 22, fontWeight: 800, color: "var(--brand-700)", marginTop: 4 }}>Beyannameler · Nisan 2026</h3>
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <div style={{ padding: "8px 14px", background: "#fff", border: "1px solid var(--border-light)", borderRadius: 8, fontSize: 12, color: "var(--text-muted)" }}>Dönem: 2026/04 ▾</div>
          <div style={{ padding: "8px 14px", background: "var(--brand-500)", color: "#fff", borderRadius: 8, fontSize: 12, fontWeight: 600 }}>+ Toplu Kontrol</div>
        </div>
      </div>

      {/* KPI cards */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12, marginBottom: 18 }}>
        {[
          { l: "Tahakkuk", v: "142", c: "var(--success-green)" },
          { l: "Beklemede", v: "8", c: "#f59e0b" },
          { l: "Hatalı", v: "3", c: "#ef4444" },
          { l: "Toplam Vergi", v: "₺1.4M", c: "var(--brand-500)" },
        ].map((k, i) => (
          <div key={i} style={{ background: "#fff", padding: 14, borderRadius: 10, border: "1px solid var(--border-light)" }}>
            <div style={{ fontSize: 10.5, color: "var(--text-muted)", fontWeight: 700, letterSpacing: ".06em", textTransform: "uppercase" }}>{k.l}</div>
            <div style={{ fontSize: 24, fontWeight: 800, color: k.c, marginTop: 4, letterSpacing: "-.5px" }}>{k.v}</div>
          </div>
        ))}
      </div>

      {/* Table */}
      <div style={{ background: "#fff", border: "1px solid var(--border-light)", borderRadius: 10, overflow: "hidden" }}>
        <div style={{ display: "grid", gridTemplateColumns: "100px 1fr 90px 110px 90px 80px", padding: "10px 14px", background: "#f1f5f9", fontSize: 10.5, fontWeight: 700, color: "var(--text-muted)", letterSpacing: ".04em", textTransform: "uppercase" }}>
            <span>VKN</span><span>Mükellef</span><span>Tür</span><span>Durum</span><span>Tahakkuk</span><span>Tarih</span>
        </div>
        {rows.map((r, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "100px 1fr 90px 110px 90px 80px", padding: "10px 14px", borderTop: "1px solid var(--border-light)", fontSize: 12, alignItems: "center" }}>
            <span style={{ color: "var(--text-muted)", fontFamily: "monospace" }}>{r.v}</span>
            <span style={{ fontWeight: 600 }}>{r.m}</span>
            <span style={{ color: "var(--text-muted)" }}>{r.t}</span>
            <span><span className={`pill-${r.c}`}>{r.s.toUpperCase()}</span></span>
            <span style={{ fontWeight: 600, color: r.c === "red" || r.c === "amber" ? "var(--text-muted)" : "var(--brand-700)" }}>{r.a}</span>
            <span style={{ color: "var(--text-muted)" }}>{r.d}</span>
          </div>
        ))}
      </div>

      {/* footer note */}
      <div style={{ marginTop: 14, fontSize: 11, color: "var(--text-muted)", display: "flex", alignItems: "center", gap: 8 }}>
        <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--success-green)" }} />
        Son otomatik kontrol: bugün 16:00 · Sonraki: bugün 20:00
      </div>
    </AppShell>
  );
}

/* ─────────── 2. E-Tebligat ─────────── */
function MockTebligat() {
  const rows = [
    { m: "AHMET YÜKSEL", v: "1234567890", k: "1 okunmamış", b: "Genel Tebligat", t: "12.05.2026 · 14:32", c: "amber" },
    { m: "PARS KALİTE LTD.", v: "9876543210", k: "Kutu temiz", b: "—", t: "13.05.2026 · 02:18", c: "green" },
    { m: "OSMAN OKTAY", v: "5544332211", k: "2 okunmamış", b: "Vergi/Ceza İhbarnamesi", t: "13.05.2026 · 02:18", c: "red" },
    { m: "ERHAN AKKURT", v: "6677889900", k: "Kutu temiz", b: "—", t: "13.05.2026 · 02:19", c: "green" },
    { m: "SİBEL ÖZEN", v: "4433221100", k: "Kutu temiz", b: "—", t: "13.05.2026 · 02:19", c: "green" },
  ];
  return (
    <AppShell active="tebligat">
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 18 }}>
        <h3 style={{ fontSize: 22, fontWeight: 800, color: "var(--brand-700)" }}>E-Tebligat Sorgu</h3>
        <div style={{ display: "flex", gap: 8 }}>
          <div style={{ padding: "8px 14px", background: "#fff", border: "1px solid var(--border-light)", borderRadius: 8, fontSize: 12, color: "var(--text-muted)", display: "flex", alignItems: "center", gap: 6 }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--success-green)" }} />
            altyapımız Türkiye · Türkiye
          </div>
          <div style={{ padding: "8px 14px", background: "var(--ai-purple)", color: "#fff", borderRadius: 8, fontSize: 12, fontWeight: 600 }}>⚡ Tek Tıkla Toplu Sorgu</div>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12, marginBottom: 18 }}>
        {[
          { l: "Toplam mükellef", v: "127", c: "var(--brand-500)" },
          { l: "Açık tebligat", v: "5", c: "#ef4444" },
          { l: "Son tarama", v: "3sa önce", c: "var(--success-green)" },
        ].map((k, i) => (
          <div key={i} style={{ background: "#fff", padding: 14, borderRadius: 10, border: "1px solid var(--border-light)" }}>
            <div style={{ fontSize: 10.5, color: "var(--text-muted)", fontWeight: 700, letterSpacing: ".06em", textTransform: "uppercase" }}>{k.l}</div>
            <div style={{ fontSize: 22, fontWeight: 800, color: k.c, marginTop: 4 }}>{k.v}</div>
          </div>
        ))}
      </div>

      <div style={{ background: "#fff", border: "1px solid var(--border-light)", borderRadius: 10, overflow: "hidden" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 100px 130px 150px 140px", padding: "10px 14px", background: "#f1f5f9", fontSize: 10.5, fontWeight: 700, color: "var(--text-muted)", letterSpacing: ".04em", textTransform: "uppercase" }}>
            <span>Mükellef</span><span>VKN</span><span>Durum</span><span>Belge</span><span>Sorgu</span>
        </div>
        {rows.map((r, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 100px 130px 150px 140px", padding: "10px 14px", borderTop: "1px solid var(--border-light)", fontSize: 12, alignItems: "center" }}>
            <span style={{ fontWeight: 600 }}>{r.m}</span>
            <span style={{ color: "var(--text-muted)", fontFamily: "monospace" }}>{r.v}</span>
            <span><span className={`pill-${r.c}`}>{r.k}</span></span>
            <span style={{ color: r.c === "green" ? "var(--text-muted)" : "var(--brand-700)", fontWeight: r.c === "green" ? 400 : 600 }}>{r.b}</span>
            <span style={{ color: "var(--text-muted)", fontSize: 11 }}>{r.t}</span>
          </div>
        ))}
      </div>
    </AppShell>
  );
}

/* ─────────── 3. Vergi Borcu ─────────── */
function MockVergi() {
  const rows = [
    { m: "AHMET YÜKSEL", v: "1234567890", b: "₺12.450,30", t: "26.04.2026", g: "Geç ödeme", c: "amber" },
    { m: "PARS KALİTE LTD.", v: "9876543210", b: "₺0,00", t: "—", g: "Borç yok", c: "green" },
    { m: "OSMAN OKTAY", v: "5544332211", b: "₺48.230,00", t: "26.04.2026", g: "Vadesi geçmiş", c: "red" },
    { m: "MAHMUT TEMIZSOY", v: "1122334455", b: "₺0,00", t: "—", g: "Borç yok", c: "green" },
    { m: "ERHAN AKKURT", v: "6677889900", b: "₺3.892,40", t: "31.05.2026", g: "Vadesinde", c: "blue" },
  ];
  return (
    <AppShell active="vergi">
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 18 }}>
        <h3 style={{ fontSize: 22, fontWeight: 800, color: "var(--brand-700)" }}>Vergi Borcu Sorgu</h3>
        <div style={{ padding: "8px 14px", background: "var(--brand-500)", color: "#fff", borderRadius: 8, fontSize: 12, fontWeight: 600 }}>📊 Borç Raporu İndir</div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12, marginBottom: 18 }}>
        {[
          { l: "Toplam Borç", v: "₺487K", c: "#ef4444" },
          { l: "Vadesi Geçmiş", v: "12 mük.", c: "#b91c1c" },
          { l: "Vadesinde", v: "23 mük.", c: "var(--brand-500)" },
          { l: "Borçsuz", v: "92 mük.", c: "var(--success-green)" },
        ].map((k, i) => (
          <div key={i} style={{ background: "#fff", padding: 14, borderRadius: 10, border: "1px solid var(--border-light)" }}>
            <div style={{ fontSize: 10.5, color: "var(--text-muted)", fontWeight: 700, letterSpacing: ".06em", textTransform: "uppercase" }}>{k.l}</div>
            <div style={{ fontSize: 22, fontWeight: 800, color: k.c, marginTop: 4 }}>{k.v}</div>
          </div>
        ))}
      </div>

      <div style={{ background: "#fff", border: "1px solid var(--border-light)", borderRadius: 10, overflow: "hidden" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 100px 120px 100px 140px", padding: "10px 14px", background: "#f1f5f9", fontSize: 10.5, fontWeight: 700, color: "var(--text-muted)", letterSpacing: ".04em", textTransform: "uppercase" }}>
            <span>Mükellef</span><span>VKN</span><span>Borç</span><span>Vade</span><span>Durum</span>
        </div>
        {rows.map((r, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 100px 120px 100px 140px", padding: "10px 14px", borderTop: "1px solid var(--border-light)", fontSize: 12, alignItems: "center" }}>
            <span style={{ fontWeight: 600 }}>{r.m}</span>
            <span style={{ color: "var(--text-muted)", fontFamily: "monospace" }}>{r.v}</span>
            <span style={{ fontWeight: 700, color: r.c === "red" ? "#ef4444" : r.c === "amber" ? "#b45309" : "var(--brand-700)" }}>{r.b}</span>
            <span style={{ color: "var(--text-muted)" }}>{r.t}</span>
            <span><span className={`pill-${r.c}`}>{r.g}</span></span>
          </div>
        ))}
      </div>
    </AppShell>
  );
}

/* ─────────── 4. SGK Vizite ─────────── */
function MockSgk() {
  const rows = [
    { p: "Mehmet Aksoy", tc: "12345678901", r: "İstirahat", d: "5 gün", b: "13.05 — 17.05", s: "ONAY BEKLİYOR", c: "amber" },
    { p: "Ayşe Demir", tc: "23456789012", r: "İstirahat", d: "3 gün", b: "12.05 — 14.05", s: "ONAYLANDI", c: "green" },
    { p: "Hasan Çelik", tc: "34567890123", r: "İş Kazası", d: "—", b: "10.05 ·", s: "İPTAL", c: "grey" },
    { p: "Selin Öz", tc: "45678901234", r: "İstirahat", d: "7 gün", b: "13.05 — 19.05", s: "ONAYLANDI", c: "green" },
  ];
  return (
    <AppShell active="sgk">
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 18 }}>
        <h3 style={{ fontSize: 22, fontWeight: 800, color: "var(--brand-700)" }}>SGK Vizite</h3>
        <div style={{ padding: "8px 14px", background: "#fff", border: "1px solid var(--border-light)", borderRadius: 8, fontSize: 12, color: "var(--text-muted)", display: "flex", alignItems: "center", gap: 6 }}>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--success-green)" }} />
          SGK Web Servisi · SOAP bağlantısı aktif
        </div>
      </div>

      <div style={{ background: "linear-gradient(135deg, var(--brand-500), var(--ai-purple))", color: "#fff", padding: 16, borderRadius: 10, marginBottom: 18, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div>
          <div style={{ fontSize: 11, opacity: .85, letterSpacing: ".06em", textTransform: "uppercase", fontWeight: 700 }}>Mart 2026 Dönemi · Sorgulama</div>
          <div style={{ marginTop: 4, fontSize: 18, fontWeight: 700 }}>47 personel · 12 rapor · 3 onay bekliyor</div>
        </div>
        <div style={{ padding: "10px 18px", background: "rgba(255,255,255,.18)", borderRadius: 8, fontSize: 13, fontWeight: 700 }}>+ Toplu Sorgu</div>
      </div>

      <div style={{ background: "#fff", border: "1px solid var(--border-light)", borderRadius: 10, overflow: "hidden" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 130px 100px 90px 160px 110px", padding: "10px 14px", background: "#f1f5f9", fontSize: 10.5, fontWeight: 700, color: "var(--text-muted)", letterSpacing: ".04em", textTransform: "uppercase" }}>
            <span>Personel</span><span>TC</span><span>Rapor</span><span>Süre</span><span>Tarih Aralığı</span><span>Durum</span>
        </div>
        {rows.map((r, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 130px 100px 90px 160px 110px", padding: "10px 14px", borderTop: "1px solid var(--border-light)", fontSize: 12, alignItems: "center" }}>
            <span style={{ fontWeight: 600 }}>{r.p}</span>
            <span style={{ color: "var(--text-muted)", fontFamily: "monospace" }}>{r.tc}</span>
            <span style={{ color: "var(--text-muted)" }}>{r.r}</span>
            <span style={{ color: "var(--text-muted)" }}>{r.d}</span>
            <span style={{ color: "var(--text-muted)" }}>{r.b}</span>
            <span><span className={`pill-${r.c}`}>{r.s}</span></span>
          </div>
        ))}
      </div>
    </AppShell>
  );
}

/* ─────────── 5. Karşıt İnceleme ─────────── */
function MockKarsi() {
  const rows = [
    { m: "PARS KALİTE LTD.", v: "9876543210", vd: "Ankara V.D.", d: "Q1 2026", g: "13.05.2026 14:08", b: "VDK", c: "red" },
    { m: "AHMET YÜKSEL", v: "1234567890", vd: "İstanbul V.D.", d: "—", g: "Talep yok", b: "—", c: "green" },
    { m: "OSMAN OKTAY", v: "5544332211", vd: "İzmir V.D.", d: "—", g: "Talep yok", b: "—", c: "green" },
    { m: "MAHMUT TEMIZSOY", v: "1122334455", vd: "Bursa V.D.", d: "2025", g: "08.05.2026", b: "Tamamlandı", c: "grey" },
    { m: "ERHAN AKKURT", v: "6677889900", vd: "Ankara V.D.", d: "—", g: "Talep yok", b: "—", c: "green" },
  ];
  return (
    <AppShell active="karsi">
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 18 }}>
        <h3 style={{ fontSize: 22, fontWeight: 800, color: "var(--brand-700)" }}>Karşıt İnceleme Tarayıcı</h3>
        <div style={{ padding: "8px 14px", background: "#fff", border: "1px solid var(--border-light)", borderRadius: 8, fontSize: 12, color: "var(--text-muted)", display: "flex", alignItems: "center", gap: 6 }}>
          🕐 Saatlik DVD taraması · son: 12 dk önce
        </div>
      </div>

      <div style={{ background: "linear-gradient(135deg, #fff7ed, #fff)", border: "1px solid #fcd34d", borderRadius: 10, padding: 14, marginBottom: 18, display: "flex", gap: 12, alignItems: "center" }}>
        <div style={{ width: 38, height: 38, borderRadius: 8, background: "#fef3c7", color: "#b45309", display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 18 }}>⚠️</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 10, fontWeight: 800, color: "#b45309", letterSpacing: ".06em", textTransform: "uppercase" }}>Yeni talep tespit edildi</div>
          <div style={{ marginTop: 4, fontSize: 13.5, fontWeight: 700, color: "var(--brand-700)" }}>PARS KALİTE KONTROL LTD. — Ankara V.D., Q1 2026 · VDK</div>
        </div>
        <div style={{ display: "flex", gap: 6 }}>
          <span className="pill-green">📱 SMS</span>
          <span className="pill-green">💬 WhatsApp</span>
        </div>
      </div>

      <div style={{ background: "#fff", border: "1px solid var(--border-light)", borderRadius: 10, overflow: "hidden" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 100px 130px 90px 140px 110px", padding: "10px 14px", background: "#f1f5f9", fontSize: 10.5, fontWeight: 700, color: "var(--text-muted)", letterSpacing: ".04em", textTransform: "uppercase" }}>
            <span>Mükellef</span><span>VKN</span><span>Vergi D.</span><span>Dönem</span><span>Geliş</span><span>Durum</span>
        </div>
        {rows.map((r, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 100px 130px 90px 140px 110px", padding: "10px 14px", borderTop: "1px solid var(--border-light)", fontSize: 12, alignItems: "center" }}>
            <span style={{ fontWeight: 600 }}>{r.m}</span>
            <span style={{ color: "var(--text-muted)", fontFamily: "monospace" }}>{r.v}</span>
            <span style={{ color: "var(--text-muted)" }}>{r.vd}</span>
            <span style={{ color: "var(--text-muted)" }}>{r.d}</span>
            <span style={{ color: "var(--text-muted)", fontSize: 11 }}>{r.g}</span>
            <span><span className={`pill-${r.c}`}>{r.b}</span></span>
          </div>
        ))}
      </div>
    </AppShell>
  );
}

/* ─────────── 6. Mükellef Yönetimi ─────────── */
function MockMukellef() {
  const rows = [
    { m: "AHMET YÜKSEL", v: "1234567890", s: "Tek Tabela", a: "Sezer Köksal", t: "+90 5XX XXX XX 01", st: "Aktif" },
    { m: "PARS KALİTE KONTROL LTD.", v: "9876543210", s: "Ltd Şti", a: "Sezer Köksal", t: "+90 5XX XXX XX 02", st: "Aktif" },
    { m: "OSMAN OKTAY", v: "5544332211", s: "Şahıs", a: "Mehmet Selim Köksal", t: "+90 5XX XXX XX 03", st: "Aktif" },
    { m: "MAHMUT TEMIZSOY", v: "1122334455", s: "Anonim Şti", a: "Sezer Köksal", t: "+90 5XX XXX XX 04", st: "Aktif" },
    { m: "ERHAN AKKURT", v: "6677889900", s: "Şahıs", a: "—", t: "+90 5XX XXX XX 05", st: "Pasif" },
    { m: "SİBEL ÖZEN", v: "4433221100", s: "Ltd Şti", a: "Mehmet Selim Köksal", t: "+90 5XX XXX XX 06", st: "Aktif" },
  ];
  return (
    <AppShell active="mukellef">
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 18 }}>
        <h3 style={{ fontSize: 22, fontWeight: 800, color: "var(--brand-700)" }}>Mükellefler</h3>
        <div style={{ display: "flex", gap: 8 }}>
          <div style={{ padding: "8px 14px", background: "#fff", border: "1px solid var(--border-light)", borderRadius: 8, fontSize: 12, color: "var(--text-muted)" }}>📥 Zirve'den Aktar</div>
          <div style={{ padding: "8px 14px", background: "var(--brand-500)", color: "#fff", borderRadius: 8, fontSize: 12, fontWeight: 600 }}>+ Yeni Mükellef</div>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12, marginBottom: 18 }}>
        {[
          { l: "Toplam Mükellef", v: "127", c: "var(--brand-500)" },
          { l: "Aktif", v: "121", c: "var(--success-green)" },
          { l: "Pasif", v: "6", c: "var(--text-muted)" },
          { l: "Atanmamış", v: "2", c: "#f59e0b" },
        ].map((k, i) => (
          <div key={i} style={{ background: "#fff", padding: 14, borderRadius: 10, border: "1px solid var(--border-light)" }}>
            <div style={{ fontSize: 10.5, color: "var(--text-muted)", fontWeight: 700, letterSpacing: ".06em", textTransform: "uppercase" }}>{k.l}</div>
            <div style={{ fontSize: 22, fontWeight: 800, color: k.c, marginTop: 4 }}>{k.v}</div>
          </div>
        ))}
      </div>

      <div style={{ background: "#fff", border: "1px solid var(--border-light)", borderRadius: 10, overflow: "hidden" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 100px 110px 1fr 130px 80px", padding: "10px 14px", background: "#f1f5f9", fontSize: 10.5, fontWeight: 700, color: "var(--text-muted)", letterSpacing: ".04em", textTransform: "uppercase" }}>
            <span>Mükellef</span><span>VKN</span><span>Şirket Tipi</span><span>Atanan</span><span>Telefon</span><span>Durum</span>
        </div>
        {rows.map((r, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 100px 110px 1fr 130px 80px", padding: "10px 14px", borderTop: "1px solid var(--border-light)", fontSize: 12, alignItems: "center" }}>
            <span style={{ fontWeight: 600 }}>{r.m}</span>
            <span style={{ color: "var(--text-muted)", fontFamily: "monospace" }}>{r.v}</span>
            <span style={{ color: "var(--text-muted)" }}>{r.s}</span>
            <span style={{ color: "var(--text-muted)" }}>{r.a}</span>
            <span style={{ color: "var(--text-muted)", fontFamily: "monospace", fontSize: 11 }}>{r.t}</span>
            <span><span className={r.st === "Aktif" ? "pill-green" : "pill-grey"}>{r.st}</span></span>
          </div>
        ))}
      </div>
    </AppShell>
  );
}

/* ─────────── 7. AL — AI Fatura Parse ─────────── */
function MockAl() {
  return (
    <AppShell active="fatura">
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 18 }}>
        <h3 style={{ fontSize: 22, fontWeight: 800, color: "var(--brand-700)" }}>AL · AI Fatura Parse</h3>
        <div style={{ padding: "8px 14px", background: "var(--ai-purple)", color: "#fff", borderRadius: 8, fontSize: 12, fontWeight: 600 }}>✦ yapay zekâ · Türkçe LLM</div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
        {/* WhatsApp input */}
        <div style={{ background: "#fff", border: "1px solid var(--border-light)", borderRadius: 10, padding: 18 }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: "var(--text-muted)", letterSpacing: ".06em", textTransform: "uppercase", marginBottom: 12 }}>Girdi · WhatsApp Mesajı</div>
          <div style={{ background: "#e7f4d4", borderRadius: 12, padding: 14, fontSize: 13, color: "#1f2937", lineHeight: 1.5, position: "relative" }}>
            <div style={{ fontWeight: 600, fontSize: 11, color: "#16a34a", marginBottom: 4 }}>Karaca Otomotiv +90 5XX</div>
            "Merhabalar size 2 fatura kesebilir misiniz?<br/>1- Toyota Corolla 2024 model lastik değişimi 4 adet — Bridgestone 195/65R15 — adet 1.850 TL + KDV<br/>2- Yağ filtresi değişimi — 480 TL + KDV"
            <div style={{ marginTop: 6, fontSize: 10, color: "var(--text-muted)" }}>13.05.2026 · 14:32</div>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 14, padding: 10, background: "color-mix(in oklch, var(--ai-purple) 10%, white)", borderRadius: 8 }}>
            <span style={{ fontSize: 16 }}>✦</span>
            <span style={{ fontSize: 11, fontWeight: 700, color: "var(--ai-purple)" }}>AL parse ediyor… 2.6 sn</span>
            <div style={{ marginLeft: "auto", width: 60, height: 4, background: "color-mix(in oklch, var(--ai-purple) 14%, white)", borderRadius: 2, overflow: "hidden" }}>
              <div style={{ width: "80%", height: "100%", background: "var(--ai-purple)" }} />
            </div>
          </div>
        </div>

        {/* AL Parse output */}
        <div style={{ background: "#fff", border: "1px solid var(--border-light)", borderRadius: 10, padding: 18 }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: "var(--text-muted)", letterSpacing: ".06em", textTransform: "uppercase", marginBottom: 12 }}>AL Çıktısı · Fatura Taslağı</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 8, fontSize: 12 }}>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 80px 80px 80px", gap: 8, paddingBottom: 6, borderBottom: "1px solid var(--border-light)", fontWeight: 700, color: "var(--text-muted)", fontSize: 10.5, letterSpacing: ".04em", textTransform: "uppercase" }}>
              <span>Kalem</span><span>Adet</span><span>Birim</span><span>KDV</span>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 80px 80px 80px", gap: 8, alignItems: "center", padding: "6px 0" }}>
              <span><strong style={{ color: "var(--brand-700)" }}>Bridgestone 195/65R15 Lastik</strong><br/><span style={{ fontSize: 10.5, color: "var(--text-muted)" }}>Hesap: 153 · KDV %20</span></span>
              <span>4</span><span style={{ fontWeight: 600 }}>₺1.850</span><span style={{ fontWeight: 700, color: "var(--success-green)" }}>%20</span>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 80px 80px 80px", gap: 8, alignItems: "center", padding: "6px 0", borderTop: "1px solid var(--border-light)" }}>
              <span><strong style={{ color: "var(--brand-700)" }}>Yağ Filtresi Değişimi</strong><br/><span style={{ fontSize: 10.5, color: "var(--text-muted)" }}>Hesap: 153 · KDV %20</span></span>
              <span>1</span><span style={{ fontWeight: 600 }}>₺480</span><span style={{ fontWeight: 700, color: "var(--success-green)" }}>%20</span>
            </div>
            <div style={{ marginTop: 12, padding: 10, background: "var(--bg-muted)", borderRadius: 8 }}>
              <div style={{ display: "flex", justifyContent: "space-between" }}><span style={{ color: "var(--text-muted)" }}>Ara Toplam</span><span style={{ fontWeight: 600 }}>₺7.880</span></div>
              <div style={{ display: "flex", justifyContent: "space-between" }}><span style={{ color: "var(--text-muted)" }}>KDV (%20)</span><span style={{ fontWeight: 600 }}>₺1.576</span></div>
              <div style={{ display: "flex", justifyContent: "space-between", paddingTop: 6, marginTop: 6, borderTop: "1px solid var(--border-light)" }}><strong style={{ color: "var(--brand-700)" }}>Genel Toplam</strong><strong style={{ color: "var(--brand-700)" }}>₺9.456</strong></div>
            </div>
            <div style={{ display: "flex", gap: 6, marginTop: 4 }}>
              <button style={{ flex: 1, padding: "10px", background: "var(--brand-500)", color: "#fff", border: 0, borderRadius: 8, fontWeight: 700, fontSize: 12, cursor: "pointer" }}>e-Arşiv ile Kes</button>
              <button style={{ padding: "10px 14px", background: "#fff", color: "var(--text-muted)", border: "1px solid var(--border-light)", borderRadius: 8, fontSize: 12 }}>Düzenle</button>
            </div>
          </div>
        </div>
      </div>
    </AppShell>
  );
}

/* ─────────── 8. e-Arşiv Fatura Kesme ─────────── */
function MockEarsiv() {
  const rows = [
    { n: "FE2026000142", a: "AHMET YÜKSEL", v: "1234567890", t: "13.05.2026", tt: "₺9.456,00", s: "GÖNDERİLDİ", c: "green" },
    { n: "FE2026000141", a: "KARACA OTOMOTİV", v: "9988776655", t: "13.05.2026", tt: "₺3.540,00", s: "GÖNDERİLDİ", c: "green" },
    { n: "FE2026000140", a: "MEHMET DEMİR", v: "5566778899", t: "12.05.2026", tt: "₺1.250,00", s: "BEKLEMEDE", c: "amber" },
    { n: "FE2026000139", a: "DEMİR LTD. ŞTİ.", v: "3344556677", t: "12.05.2026", tt: "₺18.940,00", s: "GÖNDERİLDİ", c: "green" },
    { n: "FE2026000138", a: "TECHNO YAZILIM", v: "1122334466", t: "11.05.2026", tt: "₺4.720,00", s: "İPTAL", c: "grey" },
  ];
  return (
    <AppShell active="fatura">
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 18 }}>
        <h3 style={{ fontSize: 22, fontWeight: 800, color: "var(--brand-700)" }}>e-Arşiv Faturalar</h3>
        <div style={{ display: "flex", gap: 8 }}>
          <div style={{ padding: "8px 14px", background: "#fff", border: "1px solid var(--border-light)", borderRadius: 8, fontSize: 12, color: "var(--text-muted)" }}>📥 İçe Aktar</div>
          <div style={{ padding: "8px 14px", background: "var(--brand-500)", color: "#fff", borderRadius: 8, fontSize: 12, fontWeight: 600 }}>+ Yeni Fatura</div>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12, marginBottom: 18 }}>
        {[
          { l: "Mayıs Faturaları", v: "142", c: "var(--brand-500)" },
          { l: "Mayıs KDV", v: "₺48.320", c: "var(--success-green)" },
          { l: "Beklemede", v: "3", c: "#f59e0b" },
          { l: "İptal", v: "2", c: "var(--text-muted)" },
        ].map((k, i) => (
          <div key={i} style={{ background: "#fff", padding: 14, borderRadius: 10, border: "1px solid var(--border-light)" }}>
            <div style={{ fontSize: 10.5, color: "var(--text-muted)", fontWeight: 700, letterSpacing: ".06em", textTransform: "uppercase" }}>{k.l}</div>
            <div style={{ fontSize: 22, fontWeight: 800, color: k.c, marginTop: 4 }}>{k.v}</div>
          </div>
        ))}
      </div>

      <div style={{ background: "#fff", border: "1px solid var(--border-light)", borderRadius: 10, overflow: "hidden" }}>
        <div style={{ display: "grid", gridTemplateColumns: "130px 1fr 100px 100px 110px 110px", padding: "10px 14px", background: "#f1f5f9", fontSize: 10.5, fontWeight: 700, color: "var(--text-muted)", letterSpacing: ".04em", textTransform: "uppercase" }}>
            <span>Fatura No</span><span>Alıcı</span><span>VKN</span><span>Tarih</span><span>Tutar</span><span>Durum</span>
        </div>
        {rows.map((r, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "130px 1fr 100px 100px 110px 110px", padding: "10px 14px", borderTop: "1px solid var(--border-light)", fontSize: 12, alignItems: "center" }}>
            <span style={{ fontFamily: "monospace", color: "var(--brand-500)", fontWeight: 600 }}>{r.n}</span>
            <span style={{ fontWeight: 600 }}>{r.a}</span>
            <span style={{ color: "var(--text-muted)", fontFamily: "monospace" }}>{r.v}</span>
            <span style={{ color: "var(--text-muted)" }}>{r.t}</span>
            <span style={{ fontWeight: 700, color: "var(--brand-700)" }}>{r.tt}</span>
            <span><span className={`pill-${r.c}`}>{r.s}</span></span>
          </div>
        ))}
      </div>
    </AppShell>
  );
}

/* ─────────── 9. Mikro ePortal ─────────── */
function MockMikro() {
  return (
    <AppShell active="fatura">
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 18 }}>
        <h3 style={{ fontSize: 22, fontWeight: 800, color: "var(--brand-700)" }}>Çoklu Portal · Mikro ePortal</h3>
        <div style={{ padding: "8px 14px", background: "#fff", border: "1px solid var(--border-light)", borderRadius: 8, fontSize: 12, color: "var(--text-muted)", display: "flex", alignItems: "center", gap: 6 }}>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--success-green)" }} /> 3 portal bağlı
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14, marginBottom: 18 }}>
        {[
          { n: "GİB e-Arşiv", s: "earsivportal.efatura.gov.tr", c: "#1e3a8a", b: 142, sa: "Bağlı" },
          { n: "Mikro ePortal", s: "eportal.mikro.com.tr", c: "#0ba5ec", b: 86, sa: "Bağlı" },
          { n: "Zirve Portal", s: "Zirve PC üzerinden", c: "#ed7c3a", b: 24, sa: "Bağlı" },
        ].map((p, i) => (
          <div key={i} style={{ background: "#fff", borderRadius: 10, border: "1px solid var(--border-light)", padding: 16 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}>
              <div style={{ width: 36, height: 36, borderRadius: 8, background: p.c, color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", fontWeight: 800 }}>{p.n[0]}</div>
              <div>
                <div style={{ fontSize: 13, fontWeight: 700, color: "var(--brand-700)" }}>{p.n}</div>
                <div style={{ fontSize: 10.5, color: "var(--text-muted)", fontFamily: "monospace" }}>{p.s}</div>
              </div>
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11.5, color: "var(--text-muted)" }}>
              <span>Bu ay</span>
              <strong style={{ color: p.c }}>{p.b} fatura</strong>
            </div>
            <div style={{ marginTop: 6, padding: "4px 10px", background: "color-mix(in oklch, var(--success-green) 14%, white)", color: "#16a34a", fontSize: 10.5, fontWeight: 700, borderRadius: 999, display: "inline-block" }}>● {p.sa}</div>
          </div>
        ))}
      </div>

      <div style={{ background: "#fff", border: "1px solid var(--border-light)", borderRadius: 10, padding: 18 }}>
        <div style={{ fontSize: 13, fontWeight: 700, color: "var(--brand-700)", marginBottom: 12 }}>Akıllı Yönlendirme</div>
        <div style={{ fontSize: 12.5, color: "var(--text-body)", lineHeight: 1.6 }}>
          Fatura kesilirken mükellefin sistemine göre otomatik yönlendirme yapılır.
          GİB mükellefi → <span style={{ color: "#1e3a8a", fontWeight: 700 }}>e-Arşiv Portal</span> ·
          Mikro kullanıyorsa → <span style={{ color: "#0ba5ec", fontWeight: 700 }}>Mikro ePortal</span> ·
          Zirve kullanıyorsa → <span style={{ color: "#ed7c3a", fontWeight: 700 }}>Zirve Portal</span>.
          Tek butonla doğru sisteme gönderim.
        </div>
      </div>
    </AppShell>
  );
}

/* ─────────── 10. Zirve / Luca İçe Aktarım ─────────── */
function MockZirve() {
  return (
    <AppShell active="mukellef">
      <div style={{ marginBottom: 18 }}>
        <h3 style={{ fontSize: 22, fontWeight: 800, color: "var(--brand-700)" }}>Mükellef İçe Aktarım</h3>
        <p style={{ marginTop: 4, fontSize: 13, color: "var(--text-muted)" }}>Zirve veritabanından veya Luca XML dosyasından mükellef listesini toplu olarak içeri alın.</p>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, marginBottom: 18 }}>
        <div style={{ background: "#fff", border: "2px solid var(--brand-500)", borderRadius: 12, padding: 20, position: "relative" }}>
          <span style={{ position: "absolute", top: -12, right: 18, background: "var(--brand-500)", color: "#fff", fontSize: 10, fontWeight: 700, padding: "3px 10px", borderRadius: 999, letterSpacing: ".04em" }}>SEÇİLDİ</span>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14 }}>
            <div style={{ width: 40, height: 40, borderRadius: 8, background: "var(--brand-500)", color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", fontWeight: 800 }}>Z</div>
            <div>
              <div style={{ fontSize: 15, fontWeight: 800, color: "var(--brand-700)" }}>Zirve</div>
              <div style={{ fontSize: 11, color: "var(--text-muted)" }}>Veritabanı tarayıcı</div>
            </div>
          </div>
          <div style={{ fontSize: 12, color: "var(--text-body)", lineHeight: 1.5 }}>Zirve kurulu PC'nin yerel veritabanı taranır. Tüm mükellef kayıtları otomatik bulunur.</div>
        </div>
        <div style={{ background: "#fff", border: "1px solid var(--border-light)", borderRadius: 12, padding: 20 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14 }}>
            <div style={{ width: 40, height: 40, borderRadius: 8, background: "#f59e0b", color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", fontWeight: 800 }}>L</div>
            <div>
              <div style={{ fontSize: 15, fontWeight: 800, color: "var(--brand-700)" }}>Luca</div>
              <div style={{ fontSize: 11, color: "var(--text-muted)" }}>XML dosyası</div>
            </div>
          </div>
          <div style={{ fontSize: 12, color: "var(--text-muted)" }}>Luca'dan export edilen XML dosyasını yükleyin, mükellefler tek seferde gelir.</div>
        </div>
      </div>

      <div style={{ background: "#fff", border: "1px solid var(--border-light)", borderRadius: 10, padding: 18 }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }}>
          <div>
            <div style={{ fontSize: 13, fontWeight: 700, color: "var(--brand-700)" }}>Zirve Aktarım · Adım 2/3 — VKN Eşleştirme</div>
            <div style={{ fontSize: 11, color: "var(--text-muted)", marginTop: 2 }}>119 yeni · 8 mevcut (güncellenecek) · 0 hatalı</div>
          </div>
          <div style={{ padding: "8px 14px", background: "var(--success-green)", color: "#fff", borderRadius: 8, fontSize: 12, fontWeight: 600 }}>İçe Aktarımı Başlat →</div>
        </div>
        <div style={{ height: 8, background: "var(--bg-muted)", borderRadius: 4, overflow: "hidden", marginBottom: 12 }}>
          <div style={{ width: "67%", height: "100%", background: "linear-gradient(90deg, var(--brand-500), var(--ai-purple))" }} />
        </div>
        {[
          { v: "1234567890", m: "AHMET YÜKSEL", s: "YENİ", c: "blue" },
          { v: "9876543210", m: "PARS KALİTE LTD.", s: "MEVCUT — GÜNCELLE", c: "amber" },
          { v: "5544332211", m: "OSMAN OKTAY", s: "YENİ", c: "blue" },
          { v: "1122334455", m: "MAHMUT TEMIZSOY", s: "YENİ", c: "blue" },
        ].map((r, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "100px 1fr 180px", padding: "8px 0", borderTop: i ? "1px solid var(--border-light)" : "none", fontSize: 12, alignItems: "center" }}>
            <span style={{ color: "var(--text-muted)", fontFamily: "monospace" }}>{r.v}</span>
            <span style={{ fontWeight: 600 }}>{r.m}</span>
            <span><span className={`pill-${r.c}`}>{r.s}</span></span>
          </div>
        ))}
      </div>
    </AppShell>
  );
}

/* ─────────── 11. Görev & Ekip ─────────── */
function MockGorev() {
  const cols = [
    { t: "Atanacak", n: 5, c: "#94a3b8", rows: [
      { m: "AHMET YÜKSEL", g: "KDV1 hazırla", t: "26.04", p: "Orta" },
      { m: "PARS KALİTE", g: "MUHSGK kontrol", t: "26.04", p: "Yüksek" },
    ]},
    { t: "Devam Ediyor", n: 8, c: "#3b82f6", rows: [
      { m: "OSMAN OKTAY", g: "Tahakkuk düzelt", t: "13.05", p: "Yüksek", a: "Ali" },
      { m: "ERHAN AKKURT", g: "GVK_94 inceleme", t: "13.05", p: "Orta", a: "Sezer" },
    ]},
    { t: "İnceleme", n: 3, c: "#f59e0b", rows: [
      { m: "DEMİR LTD.", g: "e-Fatura kontrol", t: "12.05", p: "Düşük", a: "Mehmet" },
    ]},
    { t: "Tamamlandı", n: 142, c: "#22c55e", rows: [
      { m: "SİBEL ÖZEN", g: "KDV1 onayı", t: "10.05", p: "Orta", a: "Ali", done: true },
      { m: "MAHMUT TEMİZSOY", g: "Beyanname gönderim", t: "10.05", p: "Yüksek", a: "Sezer", done: true },
    ]},
  ];
  return (
    <AppShell active="gorev">
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 18 }}>
        <h3 style={{ fontSize: 22, fontWeight: 800, color: "var(--brand-700)" }}>Görevler · Mayıs 2026</h3>
        <div style={{ padding: "8px 14px", background: "var(--brand-500)", color: "#fff", borderRadius: 8, fontSize: 12, fontWeight: 600 }}>+ Yeni Görev</div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
        {cols.map((col, ci) => (
          <div key={ci} style={{ background: "var(--bg-muted)", borderRadius: 10, padding: 10 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 10, padding: "0 4px" }}>
              <span style={{ width: 8, height: 8, borderRadius: 999, background: col.c }} />
              <span style={{ fontSize: 11.5, fontWeight: 800, color: "var(--brand-700)", letterSpacing: ".04em", textTransform: "uppercase" }}>{col.t}</span>
              <span style={{ fontSize: 11, color: "var(--text-muted)", fontWeight: 700, marginLeft: "auto" }}>{col.n}</span>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              {col.rows.map((r, ri) => (
                <div key={ri} style={{ background: "#fff", borderRadius: 8, padding: 10, border: "1px solid var(--border-light)" }}>
                  <div style={{ fontSize: 12, fontWeight: 700, color: r.done ? "var(--text-muted)" : "var(--brand-700)", textDecoration: r.done ? "line-through" : "none" }}>{r.g}</div>
                  <div style={{ marginTop: 4, fontSize: 11, color: "var(--text-muted)" }}>{r.m}</div>
                  <div style={{ marginTop: 8, display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                    <span style={{ fontSize: 10, color: "var(--text-muted)" }}>{r.t}</span>
                    {r.a && (
                      <span style={{ display: "inline-flex", alignItems: "center", gap: 4, fontSize: 10, color: "var(--text-muted)" }}>
                        <span style={{ width: 16, height: 16, borderRadius: 999, background: "linear-gradient(135deg, #fde68a, #fbbf24)", display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 8, fontWeight: 700, color: "#0e1423" }}>{r.a[0]}</span>
                        {r.a}
                      </span>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </AppShell>
  );
}

/* ─────────── 12. WhatsApp Tahakkuk ─────────── */
function MockWhatsapp() {
  return (
    <AppShell active="whatsapp">
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 18 }}>
        <h3 style={{ fontSize: 22, fontWeight: 800, color: "var(--brand-700)" }}>WhatsApp Tahakkuk Gönderimi</h3>
        <div style={{ padding: "8px 14px", background: "#16a34a", color: "#fff", borderRadius: 8, fontSize: 12, fontWeight: 600 }}>💬 Toplu Gönder</div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
        {/* Compose */}
        <div style={{ background: "#fff", border: "1px solid var(--border-light)", borderRadius: 10, padding: 18 }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: "var(--text-muted)", letterSpacing: ".06em", textTransform: "uppercase", marginBottom: 12 }}>Tahakkuk Mesajı · Şablon</div>
          <div style={{ background: "var(--bg-muted)", borderRadius: 8, padding: 14, fontSize: 12, color: "var(--text-body)", lineHeight: 1.6, fontFamily: "monospace" }}>
            Sayın <span style={{ color: "var(--brand-500)", fontWeight: 700 }}>{`{{mukellef.ad}}`}</span>,<br/><br/>
            <span style={{ color: "var(--text-muted)" }}>{`{{donem}}`}</span> dönemi <span style={{ color: "var(--text-muted)" }}>{`{{beyanname.tur}}`}</span><br/>
            beyannamesi tahakkuk etmiştir.<br/><br/>
            Tutar: <span style={{ color: "var(--success-green)", fontWeight: 700 }}>{`{{beyanname.tutar}}`}</span><br/>
            Son ödeme: <span style={{ color: "#ef4444", fontWeight: 700 }}>{`{{beyanname.vade}}`}</span><br/><br/>
            <span style={{ color: "var(--text-muted)" }}>— OfisimNet</span>
          </div>
          <div style={{ marginTop: 12, fontSize: 11, color: "var(--text-muted)" }}>📎 Beyanname PDF'i otomatik eklenecek</div>
        </div>

        {/* Preview list */}
        <div style={{ background: "#fff", border: "1px solid var(--border-light)", borderRadius: 10, padding: 18 }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: "var(--text-muted)", letterSpacing: ".06em", textTransform: "uppercase", marginBottom: 12 }}>Önizleme · 4 alıcı seçildi</div>
          {[
            { m: "AHMET YÜKSEL", t: "+90 5XX XXX XX 01", b: "KDV1 · ₺12.450,30 · 26.04.2026" },
            { m: "PARS KALİTE LTD.", t: "+90 5XX XXX XX 02", b: "MUHSGK · ₺48.230 · 26.04.2026" },
            { m: "OSMAN OKTAY", t: "+90 5XX XXX XX 03", b: "KDV1 · ₺3.892,40 · 26.04.2026" },
            { m: "SİBEL ÖZEN", t: "+90 5XX XXX XX 06", b: "KDV1 · ₺21.000 · 26.04.2026" },
          ].map((r, i) => (
            <div key={i} style={{ display: "flex", gap: 10, alignItems: "center", padding: "10px 0", borderBottom: i < 3 ? "1px solid var(--border-light)" : "none" }}>
              <input type="checkbox" defaultChecked style={{ accentColor: "#16a34a" }} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 12.5, fontWeight: 700, color: "var(--brand-700)" }}>{r.m}</div>
                <div style={{ fontSize: 11, color: "var(--text-muted)", fontFamily: "monospace" }}>{r.t}</div>
                <div style={{ fontSize: 10.5, color: "var(--text-muted)", marginTop: 2 }}>{r.b}</div>
              </div>
              <span style={{ fontSize: 16, color: "#16a34a" }}>💬</span>
            </div>
          ))}
        </div>
      </div>
    </AppShell>
  );
}

/* ─────────── 13. Realtime Kontrol ─────────── */
function MockRealtime() {
  return (
    <AppShell active="beyanname">
      <div style={{ marginBottom: 18 }}>
        <h3 style={{ fontSize: 22, fontWeight: 800, color: "var(--brand-700)" }}>Beyanname Toplu Kontrol — Canlı</h3>
        <p style={{ marginTop: 4, fontSize: 13, color: "var(--text-muted)" }}>gerçek zamanlı bağlantı üzerinden anlık ilerleme — her mükellef tamamlandıkça satır güncellenir.</p>
      </div>

      <div style={{ background: "#fff", border: "1px solid var(--border-light)", borderRadius: 10, padding: 18 }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }}>
          <div>
            <div style={{ fontSize: 13, fontWeight: 700, color: "var(--brand-700)" }}>Nisan 2026 · 127 mükellef</div>
            <div style={{ fontSize: 11, color: "var(--text-muted)", marginTop: 2 }}>Başlangıç: 16:00 · Geçen: 2 dk 14 sn</div>
          </div>
          <div style={{ fontSize: 24, fontWeight: 800, color: "var(--brand-500)" }}>84%</div>
        </div>
        <div style={{ height: 10, background: "var(--bg-muted)", borderRadius: 5, overflow: "hidden", marginBottom: 14 }}>
          <div style={{ width: "84%", height: "100%", background: "linear-gradient(90deg, var(--brand-500), var(--ai-purple))" }} />
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 10, marginBottom: 14 }}>
          {[
            { l: "Tamamlandı", v: "107", c: "var(--success-green)" },
            { l: "Devam", v: "3", c: "#3b82f6" },
            { l: "Sırada", v: "17", c: "var(--text-muted)" },
            { l: "Hata", v: "0", c: "#ef4444" },
          ].map((k, i) => (
            <div key={i} style={{ padding: 10, background: "var(--bg-muted)", borderRadius: 8 }}>
              <div style={{ fontSize: 10.5, color: "var(--text-muted)", fontWeight: 700, letterSpacing: ".04em", textTransform: "uppercase" }}>{k.l}</div>
              <div style={{ fontSize: 18, fontWeight: 800, color: k.c, marginTop: 2 }}>{k.v}</div>
            </div>
          ))}
        </div>

        {/* live log */}
        <div style={{ fontSize: 10.5, fontWeight: 700, color: "var(--text-muted)", letterSpacing: ".06em", textTransform: "uppercase", marginBottom: 8 }}>Canlı Akış</div>
        {[
          { t: "16:02:14", m: "PARS KALİTE LTD.", a: "KDV1 PDF indirildi · arşive yüklendi", c: "green", i: "✓" },
          { t: "16:02:13", m: "ENGİN GÜNDOĞDU", a: "Login başarılı · yapay zekâ CAPTCHA 0.8 sn", c: "blue", i: "→" },
          { t: "16:02:12", m: "AHMET YÜKSEL", a: "Tahakkuk çekildi · ₺12.450,30", c: "green", i: "✓" },
          { t: "16:02:10", m: "SİBEL ÖZEN", a: "Beyanname listesi: 3 kayıt bulundu", c: "blue", i: "→" },
          { t: "16:02:08", m: "OSMAN OKTAY", a: "Beklemede — son tahakkuk 2 dk önce", c: "amber", i: "⋯" },
        ].map((l, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "70px 24px 160px 1fr", gap: 8, padding: "6px 8px", fontSize: 11, alignItems: "center", borderRadius: 6, background: i === 0 ? "color-mix(in oklch, var(--success-green) 8%, white)" : "transparent" }}>
            <span style={{ fontFamily: "monospace", color: "var(--text-muted)" }}>{l.t}</span>
            <span style={{ color: l.c === "green" ? "var(--success-green)" : l.c === "blue" ? "#3b82f6" : "#f59e0b", fontWeight: 700, textAlign: "center" }}>{l.i}</span>
            <span style={{ fontWeight: 600, color: "var(--brand-700)" }}>{l.m}</span>
            <span style={{ color: "var(--text-muted)" }}>{l.a}</span>
          </div>
        ))}
      </div>
    </AppShell>
  );
}

/* ─────────── 14. Arşiv & Raporlar ─────────── */
function MockArsiv() {
  return (
    <AppShell active="beyanname">
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 18 }}>
        <h3 style={{ fontSize: 22, fontWeight: 800, color: "var(--brand-700)" }}>Arşiv · Geçmiş Dönemler</h3>
        <div style={{ display: "flex", gap: 8 }}>
          <div style={{ padding: "8px 14px", background: "#fff", border: "1px solid var(--border-light)", borderRadius: 8, fontSize: 12, color: "var(--text-muted)" }}>Dönem: 2023-2026 ▾</div>
          <div style={{ padding: "8px 14px", background: "var(--brand-500)", color: "#fff", borderRadius: 8, fontSize: 12, fontWeight: 600 }}>📥 Excel İhrac</div>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12, marginBottom: 18 }}>
        {[
          { l: "Toplam PDF", v: "12.4K", c: "var(--brand-500)" },
          { l: "bulut Depolama", v: "4.2 GB", c: "var(--ai-purple)" },
          { l: "Saklama", v: "7 yıl", c: "var(--success-green)" },
          { l: "Yedek", v: "Günlük", c: "var(--success-green)" },
        ].map((k, i) => (
          <div key={i} style={{ background: "#fff", padding: 14, borderRadius: 10, border: "1px solid var(--border-light)" }}>
            <div style={{ fontSize: 10.5, color: "var(--text-muted)", fontWeight: 700, letterSpacing: ".06em", textTransform: "uppercase" }}>{k.l}</div>
            <div style={{ fontSize: 22, fontWeight: 800, color: k.c, marginTop: 4 }}>{k.v}</div>
          </div>
        ))}
      </div>

      <div style={{ background: "#fff", border: "1px solid var(--border-light)", borderRadius: 10, overflow: "hidden" }}>
        <div style={{ display: "grid", gridTemplateColumns: "100px 1fr 100px 100px 110px 80px", padding: "10px 14px", background: "#f1f5f9", fontSize: 10.5, fontWeight: 700, color: "var(--text-muted)", letterSpacing: ".04em", textTransform: "uppercase" }}>
            <span>Dönem</span><span>Mükellef</span><span>VKN</span><span>Tür</span><span>Tahakkuk</span><span>PDF</span>
        </div>
        {[
          { d: "2026/04", m: "AHMET YÜKSEL", v: "1234567890", t: "KDV1", a: "₺12.450,30" },
          { d: "2026/04", m: "PARS KALİTE LTD.", v: "9876543210", t: "MUHSGK", a: "₺48.230,00" },
          { d: "2026/03", m: "AHMET YÜKSEL", v: "1234567890", t: "KDV1", a: "₺9.230,80" },
          { d: "2026/03", m: "OSMAN OKTAY", v: "5544332211", t: "KDV1", a: "₺3.420,60" },
          { d: "2026/02", m: "MAHMUT TEMIZSOY", v: "1122334455", t: "KDV1", a: "₺18.940,00" },
          { d: "2025/12", m: "SİBEL ÖZEN", v: "4433221100", t: "GVK_94", a: "₺142.300,00" },
        ].map((r, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "100px 1fr 100px 100px 110px 80px", padding: "10px 14px", borderTop: "1px solid var(--border-light)", fontSize: 12, alignItems: "center" }}>
            <span style={{ fontFamily: "monospace", color: "var(--text-muted)" }}>{r.d}</span>
            <span style={{ fontWeight: 600 }}>{r.m}</span>
            <span style={{ color: "var(--text-muted)", fontFamily: "monospace" }}>{r.v}</span>
            <span style={{ color: "var(--text-muted)" }}>{r.t}</span>
            <span style={{ fontWeight: 700, color: "var(--brand-700)" }}>{r.a}</span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 4, color: "var(--brand-500)", fontWeight: 700, fontSize: 11 }}>📄 İndir</span>
          </div>
        ))}
      </div>
    </AppShell>
  );
}

Object.assign(window, { MockBeyanname, MockTebligat, MockVergi, MockSgk, MockKarsi, MockMukellef, MockAl, MockEarsiv, MockMikro, MockZirve, MockGorev, MockWhatsapp, MockRealtime, MockArsiv });