/* Fiyatlar sayfası — pricing detayı */

const PLAN_FEATURES = {
  takip: {
    h: "Takip Modülleri",
    items: [
      { f: "Beyanname Takibi (GİB e-Beyanname her gece otomatik)", s: true, k: true },
      { f: "E-Tebligat Sorgu (DVD, her gün otomatik)", s: true, k: true },
      { f: "Vergi Borcu Sorgu (DVD, her gün otomatik)", s: true, k: true },
      { f: "SGK Vizite (SGK Web Servisi)", s: true, k: true },
      { f: "Karşıt İnceleme Tarayıcı (saatlik DVD tarama)", s: true, k: true },
      { f: "Mükellef Yönetimi (rol bazlı yetki)", s: true, k: true },
    ],
  },
  uretim: {
    h: "Üretim & Otomasyon",
    items: [
      { f: "AL · AI Fatura Parse (yapay zekâ)", s: "50 fatura/ay", k: "Sınırsız" },
      { f: "e-Arşiv Fatura Kesme", s: true, k: true },
      { f: "Mikro ePortal + Zirve Portal", s: true, k: true },
      { f: "Zirve / Luca İçe Aktarım", s: true, k: true },
      { f: "Görev & Ekip (Kanban)", s: true, k: true },
      { f: "WhatsApp Tahakkuk", s: true, k: true },
      { f: "Realtime Kontrol Progress", s: true, k: true },
      { f: "Arşiv & Raporlar (7 yıl bulut)", s: true, k: true },
    ],
  },
  destek: {
    h: "Destek & Kullanım",
    items: [
      { f: "Mükellef limiti", s: "150'ye kadar", k: "Sınırsız" },
      { f: "Kullanıcı sayısı", s: "5 kullanıcı", k: "Sınırsız" },
      { f: "Depolama (PDF arşiv)", s: "Sınırsız (bulut)", k: "Sınırsız + öncelikli" },
      { f: "E-posta destek", s: true, k: true },
      { f: "Öncelikli WhatsApp destek", s: false, k: true },
      { f: "Atanmış müşteri yöneticisi", s: false, k: true },
      { f: "Özel SLA", s: false, k: true },
      { f: "API erişimi", s: false, k: "İsteğe bağlı" },
    ],
  },
};

function Cell({ v, color = "var(--brand-500)" }) {
  if (v === true) return <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 22, height: 22, borderRadius: "50%", background: "color-mix(in oklch, var(--success-green) 14%, white)", color: "var(--success-green)", fontSize: 13, fontWeight: 800 }}>✓</span>;
  if (v === false) return <span style={{ color: "#cbd5e1", fontSize: 14, fontWeight: 700 }}>—</span>;
  return <span style={{ fontSize: 12, color, fontWeight: 700 }}>{v}</span>;
}

function PlanCard({ name, desc, price, period, note, cta, ctaHref, featured, color, bullets }) {
  return (
    <div className="card-pop" style={{
      padding: 32,
      position: "relative",
      display: "flex", flexDirection: "column",
      border: featured ? `2px solid ${color}` : undefined,
      transform: featured ? "translateY(-6px)" : undefined,
      boxShadow: featured ? `0 30px 60px -24px ${color}40` : undefined,
      overflow: "visible",
    }}>
      {featured && (
        <span style={{ position: "absolute", top: -14, left: "50%", transform: "translateX(-50%)", background: `linear-gradient(90deg, var(--brand-500), var(--ai-purple))`, color: "#fff", fontSize: 11, fontWeight: 700, padding: "5px 14px", borderRadius: 999, letterSpacing: ".04em" }}>EN POPÜLER</span>
      )}
      <div>
        <h3 style={{ fontSize: 22, fontWeight: 800, color: "var(--brand-700)" }}>{name}</h3>
        <p style={{ marginTop: 6, fontSize: 13.5, color: "var(--text-muted)" }}>{desc}</p>
      </div>
      <div style={{ marginTop: 24, display: "flex", alignItems: "baseline", gap: 6 }}>
        <span style={{ fontSize: 30, fontWeight: 800, color: "var(--brand-700)", letterSpacing: "-.8px", fontFamily: "Montserrat" }}>{price}</span>
        <span style={{ fontSize: 13, color: "var(--text-muted)" }}>{period}</span>
      </div>
      {note && <div style={{ fontSize: 12, color: "var(--text-muted)", marginTop: 4 }}>{note}</div>}

      <ul style={{ listStyle: "none", padding: 0, margin: "24px 0 0", display: "flex", flexDirection: "column", gap: 10, flex: 1 }}>
        {bullets.map((b, i) => (
          <li key={i} style={{ display: "flex", alignItems: "flex-start", gap: 10, fontSize: 13.5, color: "var(--text-body)" }}>
            <span style={{ flexShrink: 0, width: 18, height: 18, borderRadius: "50%", background: featured ? `color-mix(in oklch, ${color} 14%, white)` : "color-mix(in oklch, var(--success-green) 14%, white)", color: featured ? color : "var(--success-green)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginTop: 1, fontSize: 11, fontWeight: 800 }}>✓</span>
            <span>{b}</span>
          </li>
        ))}
      </ul>

      <a href={ctaHref} className={featured ? "kb-btn-primary" : "kb-btn-secondary"} style={{ marginTop: 28, justifyContent: "center", height: featured ? 46 : "auto", padding: featured ? "0 20px" : "12px 18px", background: featured ? color : undefined }}>
        {cta}
      </a>
    </div>
  );
}

function FaqShort({ items }) {
  const [open, setOpen] = React.useState(0);
  return (
    <div>
      {items.map((it, i) => (
        <div key={i} style={{ borderBottom: "1px solid var(--border-light)" }}>
          <button
            onClick={() => setOpen(open === i ? -1 : i)}
            style={{ width: "100%", textAlign: "left", padding: "18px 0", border: 0, background: "none", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, font: "inherit" }}
          >
            <span style={{ fontSize: 15, fontWeight: 700, color: "var(--brand-700)" }}>{it.q}</span>
            <span style={{ fontSize: 18, color: "var(--text-muted)", transform: open === i ? "rotate(45deg)" : "none", transition: "transform .2s" }}>+</span>
          </button>
          {open === i && (
            <div style={{ paddingBottom: 18, fontSize: 14, lineHeight: 1.6, color: "var(--text-body)" }}>{it.a}</div>
          )}
        </div>
      ))}
    </div>
  );
}

function PricingPage() {
  return (
    <>
      {/* Hero */}
      <section style={{ background: "linear-gradient(180deg, color-mix(in oklch, var(--brand-500) 6%, white), white 70%)" }}>
        <div className="container-kolaybi" style={{ paddingTop: 56, paddingBottom: 32 }}>
          <div style={{ fontSize: 12, color: "var(--text-muted)", marginBottom: 14 }}>
            <a href="/" style={{ color: "var(--text-muted)" }}>Anasayfa</a> / <span style={{ color: "var(--brand-700)", fontWeight: 700 }}>Fiyatlar</span>
          </div>
          <span className="section-eyebrow">Fiyatlandırma</span>
          <h1 className="h-section" style={{ marginTop: 12, fontSize: 38, lineHeight: 1.1, letterSpacing: "-1.2px", textAlign: "center", maxWidth: 880, margin: "12px auto 0" }}>
            Tek plan — <span className="ink-bar"><span style={{ color: "var(--brand-500)" }}>tüm modüller dahil</span></span>
          </h1>
          <p className="body-lg" style={{ marginTop: 16, textAlign: "center", maxWidth: 700, margin: "16px auto 0", color: "var(--text-muted)" }}>
            Karmaşık paketler yok. Tek fiyat, 150 mükellefe kadar tüm modüller açık. 150+ mükellef varsa özel teklif yapıyoruz.
          </p>
        </div>
      </section>

      {/* Plans */}
      <section style={{ padding: "40px 0 80px", background: "#fff" }}>
        <div className="container-kolaybi">
          <div className="plans-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, maxWidth: 920, margin: "0 auto" }}>
          <PlanCard
            name="Standart"
            desc="Mali müşavir ofisleri — 150 mükellefe kadar"
            price="₺1.500"
            period="/ay (KDV hariç)"
            note="Yıllık ödemede 2 ay hediye · ₺15.000/yıl"
            cta="14 gün ücretsiz dene →"
            ctaHref="/kayit"
            featured={true}
            color="#1e3a8a"
            bullets={[
              "150 mükellefe kadar",
              "5 kullanıcı + rol bazlı yetki",
              "Tüm takip modülleri",
              "AL · AI Fatura — 50 fatura/ay dahil",
              "e-Arşiv + Mikro ePortal + Zirve",
              "WhatsApp tahakkuk gönderimi",
              "7 yıl PDF arşivi (bulut)",
              "Türkçe e-posta destek",
            ]}
          />
          <PlanCard
            name="Kurumsal"
            desc="150+ mükellef · büyük ofisler ve YMM'ler"
            price="Teklif"
            period="al"
            note="Mükellef sayısı ve modül kullanımına göre özel anlaşma"
            cta="Bizi arayın →"
            ctaHref="Iletisim.html#demo"
            featured={false}
            color="#ed7c3a"
            bullets={[
              "Sınırsız mükellef",
              "Sınırsız kullanıcı",
              "AL · AI Fatura — sınırsız",
              "Özel SLA ve öncelikli destek",
              "Atanmış müşteri yöneticisi",
              "API erişimi (isteğe bağlı)",
              "Özel veri ihrac / yedekleme",
              "Eğitim oturumları dahil",
            ]}
          />
          </div>
        </div>
        <style>{`
          @media (max-width: 800px) { .plans-grid { grid-template-columns: 1fr !important; } }
        `}</style>

        <div style={{ marginTop: 40, display: "flex", justifyContent: "center", gap: 24, flexWrap: "wrap", fontSize: 13, color: "var(--text-muted)" }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><span style={{ width: 8, height: 8, borderRadius: 999, background: "var(--success-green)" }} />Kredi kartı sorulmaz</span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><span style={{ width: 8, height: 8, borderRadius: 999, background: "var(--success-green)" }} />İstediğin an iptal</span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><span style={{ width: 8, height: 8, borderRadius: 999, background: "var(--success-green)" }} />Türkiye'de hosted veri</span>
        </div>
      </section>

      {/* Compare table */}
      <section style={{ background: "var(--bg-muted)", padding: "64px 0" }}>
        <div className="container-kolaybi">
          <div style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 40px" }}>
            <span className="section-eyebrow">Karşılaştırma</span>
            <h2 className="h-section" style={{ marginTop: 12 }}>Planlarda <span className="ink-bar"><span style={{ color: "var(--brand-500)" }}>neler dahil</span></span></h2>
          </div>

          <div style={{ background: "#fff", border: "1px solid var(--border-light)", borderRadius: 16, overflow: "hidden" }}>
            {/* header */}
            <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr", padding: "20px 24px", background: "linear-gradient(180deg, var(--brand-900), #1e2a5e)", color: "#fff" }} className="cmp-header">
              <div style={{ fontSize: 12, fontWeight: 700, opacity: .85, letterSpacing: ".06em", textTransform: "uppercase" }}>Özellik</div>
              <div style={{ textAlign: "center", fontSize: 15, fontWeight: 800 }}>Standart</div>
              <div style={{ textAlign: "center", fontSize: 15, fontWeight: 800 }}>Kurumsal</div>
            </div>
            {Object.values(PLAN_FEATURES).map((g, gi) => (
              <React.Fragment key={gi}>
                <div style={{ padding: "14px 24px", background: "#f8fafc", fontSize: 11, fontWeight: 800, color: "var(--text-muted)", letterSpacing: ".06em", textTransform: "uppercase", borderTop: gi ? "1px solid var(--border-light)" : "none" }}>{g.h}</div>
                {g.items.map((it, i) => (
                  <div key={i} style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr", padding: "14px 24px", borderTop: "1px solid var(--border-light)", fontSize: 13.5, alignItems: "center", color: "var(--text-body)" }} className="cmp-row">
                    <span>{it.f}</span>
                    <span style={{ textAlign: "center" }}><Cell v={it.s} /></span>
                    <span style={{ textAlign: "center" }}><Cell v={it.k} color="var(--ai-purple)" /></span>
                  </div>
                ))}
              </React.Fragment>
            ))}
          </div>
        </div>
      </section>

      {/* Mini FAQ */}
      <section style={{ padding: "64px 0", background: "#fff" }}>
        <div className="container-kolaybi">
          <div className="faq-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 56, alignItems: "flex-start" }}>
          <div>
            <span className="section-eyebrow">SSS</span>
            <h2 className="h-section" style={{ marginTop: 14 }}>Fiyatlandırma <span className="ink-bar"><span style={{ color: "var(--brand-500)" }}>soruları</span></span></h2>
            <p style={{ marginTop: 16, fontSize: 14, color: "var(--text-muted)", lineHeight: 1.6 }}>
              Diğer soruların yanıtı <a href="SSS.html" style={{ color: "var(--brand-500)", fontWeight: 700 }}>SSS sayfasında</a>. Yine de bulamadığınız varsa <a href="Iletisim.html" style={{ color: "var(--brand-500)", fontWeight: 700 }}>bize yazın</a>.
            </p>
          </div>
          <FaqShort items={[
            { q: "14 gün ücretsiz denemede kredi kartı vermek zorunda mıyım?", a: "Hayır. Kayıt için sadece e-posta ve telefon yeterli. 14 gün sonunda otomatik ücretlendirme YOKTUR — siz onaylamadan ödeme alınmaz." },
            { q: "Yıllık ödemede ne kadar indirim var?", a: "Yıllık ödemede 2 ay hediye — yani 12 ay yerine 10 ay tutarı ödüyorsunuz. Standart plan ₺15.000/yıl olur (₺1.500 × 10)." },
            { q: "Mükellef sayım 150'yi geçerse?", a: "150 üzeri için size özel teklif hazırlıyoruz. İletişim sayfasından ulaşırsanız mükellef sayınıza ve kullanım sıklığınıza göre fiyat veriyoruz." },
            { q: "AL · AI fatura sayısı dolarsa?", a: "Standart planda ayda 50 AL faturası dahil. Üzerine fatura başına küçük bir ek ücret işliyor (~₺2/fatura). Kurumsal pakette sınırsız." },
            { q: "Faturayı şahıs adına alabilir miyim?", a: "Evet, şahıs ya da şirket adına fatura kesilebilir. Talebinizi kayıt sırasında veya destek hattından iletmeniz yeterli." },
            { q: "İptal etmek istersem?", a: "İstediğiniz an iptal edebilirsiniz. İptal sonrası 90 gün boyunca tüm verilerinizi PDF ve CSV olarak indirebilirsiniz. Kilit-içi sözleşme yok." },
          ]} />
          </div>
        </div>
        <style>{`
          @media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr !important; gap: 32px !important; } }
        `}</style>
      </section>

      {/* CTA */}
      <section style={{ background: "linear-gradient(135deg, var(--brand-900) 0%, #1e2a5e 60%, var(--ai-purple) 100%)", color: "#fff", padding: "72px 0" }}>
        <div className="container-kolaybi" style={{ textAlign: "center" }}>
          <h2 style={{ color: "#fff", fontSize: 28, fontWeight: 800, letterSpacing: "-.9px", maxWidth: 720, margin: "0 auto", lineHeight: 1.15 }}>
            Ofisinizi <em style={{ fontStyle: "italic", color: "#fff" }}>14 günde otomatikleştirin.</em>
          </h2>
          <p style={{ marginTop: 14, opacity: .9, fontSize: 16, maxWidth: 540, margin: "14px auto 0" }}>
            Kredi kartı sorulmaz. 50 AL faturası hediye. İptal kolay.
          </p>
          <div style={{ marginTop: 28, display: "inline-flex", flexWrap: "wrap", gap: 12, justifyContent: "center" }}>
            <a href="/kayit" style={{ padding: "14px 24px", borderRadius: 12, background: "#fff", color: "var(--brand-700)", fontWeight: 700, fontSize: 15 }}>14 gün ücretsiz dene →</a>
            <a href="Iletisim.html#demo" style={{ padding: "14px 24px", borderRadius: 12, background: "rgba(255,255,255,.1)", color: "#fff", border: "1px solid rgba(255,255,255,.2)", fontWeight: 600, fontSize: 15 }}>Demo iste</a>
          </div>
        </div>
      </section>
    </>
  );
}

function App() {
  return (
    <>
      <PromoBar />
      <Navbar active="fiyatlar" />
      <main><PricingPage /></main>
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);