(function () {
/* Aibolone — paylaşılan yardımcılar + paket verisi.
   index.html ve paketler.html aynı kartları buradan kullanır. */
const { useEffect, useState } = React;
const { Card, Badge, Button } = window.Aibolone;

/* ---------- RESPONSIVE HOOK ---------- */
/* Desktop layout stays byte-for-byte identical: components only branch
   when isMobile/isTablet is true, so a wide viewport renders the original
   inline styles untouched. */
function useResponsive() {
  const read = () => ({
    isTablet: typeof window !== "undefined" && window.innerWidth <= 1024,
    isMobile: typeof window !== "undefined" && window.innerWidth <= 640,
  });
  const [state, setState] = useState(read);
  useEffect(() => {
    const onResize = () => setState(read());
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);
  return state;
}

function Icon({ name, size = 20, color }) {
  const ref = React.useRef(null);
  useEffect(() => {
    if (ref.current && window.lucide) {
      ref.current.innerHTML = "";
      const el = document.createElement("i");
      el.setAttribute("data-lucide", name);
      ref.current.appendChild(el);
      window.lucide.createIcons({ attrs: { width: size, height: size, stroke: color || "currentColor", "stroke-width": 2 } });
    }
  });
  return <span ref={ref} style={{ display: "inline-flex", color }} />;
}

/* ---------- GRADIENT CTA (ödeme aksiyonu) ---------- */
function GradientButton({ children, href, onClick, size = "lg", style: styleProp }) {
  const [h, setH] = useState(false);
  const sizes = {
    sm: { padding: "10px 18px", fontSize: 11 },
    md: { padding: "14px 28px", fontSize: 12 },
    lg: { padding: "18px 34px", fontSize: 13 },
  };
  const Tag = href ? "a" : "button";
  return (
    <Tag
      href={href} onClick={onClick}
      onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{
        display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 10,
        border: "none", cursor: "pointer", borderRadius: "var(--radius-md)", color: "#fff",
        fontFamily: "var(--font-body)", fontWeight: 700,
        textTransform: "uppercase", letterSpacing: "0.1em",
        backgroundImage: "linear-gradient(100deg, #059669, #10B981, #34D399, #6EE7B7)",
        backgroundSize: "260% 100%",
        backgroundPosition: h ? "100% 0" : "0 0",
        boxShadow: h ? "0 0 36px rgba(52,211,153,0.5), 0 8px 22px rgba(16,185,129,0.35)" : "0 6px 18px rgba(16,185,129,0.28)",
        transform: h ? "translateY(-1px)" : "none",
        transition: "all 0.5s cubic-bezier(0.4,0,0.2,1)",
        ...sizes[size],
        ...styleProp,
      }}
    >
      {children}
    </Tag>
  );
}

/* ---------- PAKET VERİSİ ---------- */
const FOUNDER_NOTE = "Tek seferlik kurulum + aylık bakım ve yönetim";

/* Tüm kartlarda aynı buton metni kullanılır. */
const PLAN_CTA = "Hemen Başlayın";

/* Katman mantığı: her üst paket alttakinin tamamını kapsar ve üzerine
   yeni katmanlar ekler. Fiyat = tek seferlik kurulum + aylık bakım.
   Basic: Katman 01 + 03 · Pro: + 04, 05, 06 · Enterprise: + 02, 07 */
const PLANS = [
  {
    id: "sprint",
    name: "Basic",
    icon: "rocket",
    tagline: "Tek noktaya odaklı otomasyon — kapıdaki ilgiyi kaçırmak istemeyen küçük salon ve stüdyolar için",
    tint: "rgba(52,211,153,0.16)",
    tone: "var(--green-400)",
    target: "$200",
    setup: 150,
    monthly: 100,
    badge: "LANSMANA ÖZEL",
    featured: false,
    checkout: "https://buy.stripe.com/bJe5kF5Gv49LayS1Rg6Vq03",
    includes: null,
    features: [
      { t: "Dönüşüm odaklı giriş kapısı", d: "Web sitenize başvuru formu, online randevu ve \"ücretsiz deneme dersi\" teklifi." },
      { t: "Anında otomatik onay", d: "Başvurana saniyeler içinde WhatsApp/e-posta onayı, size anlık bildirim." },
      { t: "Tüm başvurular tek listede", d: "Hangi kanaldan gelirse gelsin her ilgili kişi kayıt altında." },
      { t: "Otomatik Google yorum toplama", d: "Memnun üyelere doğru zamanda yorum ve tavsiye isteği gider." },
      { t: "Aylık bakım ve destek", d: "Sistem izleme, küçük düzenlemeler, 48 saat içinde yanıt." },
    ],
    cta: PLAN_CTA,
  },
  {
    id: "growth",
    name: "Pro",
    icon: "trending-up",
    tagline: "Sektöre özel akıllı satış sistemi — satış ve müşteri takibini uçtan uca otomatikleştirmek isteyen büyüyen işletmeler için",
    tint: "var(--accent-soft)",
    tone: "var(--accent)",
    target: null,
    setup: 499,
    monthly: 250,
    badge: "EN ÇOK TERCİH EDİLEN",
    featured: true,
    checkout: "https://buy.stripe.com/3cIfZjfh56hTbCWfI66Vq04",
    includes: "Basic'teki her şey, artı:",
    features: [
      { t: "60 saniyede talep yanıtı", d: "WhatsApp, Instagram ve formdan gelen her talebe anında dönüş; cevapsız kalanlara otomatik takip." },
      { t: "7/24 AI resepsiyonist", d: "Fiyat, saat, ders sorularını yanıtlar, randevuya çevirir; hassas konuları ekibinize devreder." },
      { t: "AI satış görüşmesi analizi", d: "Görüşmeler analiz edilir, üyeliği hangi itirazda kaybettiğiniz raporlanır." },
      { t: "Uçtan uca satış hunisi paneli", d: "Her adayın ilk mesajdan üyeliğe kadar hangi aşamada olduğunu tek ekranda görün." },
      { t: "Haftalık performans raporu", d: "Talep, dönüşüm ve kayıp oranları; 24 saat içinde öncelikli destek." },
    ],
    cta: PLAN_CTA,
  },
  {
    id: "scale",
    name: "Enterprise",
    icon: "layers",
    tagline: "Ölçeklenebilir büyüme işletim sistemi — birden fazla kanalı, ekibi ve yüksek üye hacmini yöneten markalar için",
    tint: "rgba(4,120,87,0.12)",
    tone: "var(--green-700)",
    target: null,
    setup: 999,
    monthly: 400,
    badge: "ÇOK ŞUBELİ / ÇOK KANALLI",
    featured: false,
    checkout: "https://buy.stripe.com/7sY8wR3yn5dP4au9jI6Vq05",
    includes: "Pro'daki her şey, artı:",
    features: [
      { t: "Gelir geri kazanımı", d: "Eski üye ve ilgilileri geri kazanma kampanyaları; başarısız ödemeleri otomatik yakalama." },
      { t: "Reklam ve büyüme ölçümü", d: "Meta/Google kampanyalarından hangisinin gerçekten üye getirdiğini ölçen raporlama." },
      { t: "Çok şube, çok ekip yapısı", d: "Şube bazlı paneller, ekip rolleri ve merkezi yönetim." },
      { t: "Özel entegrasyonlar", d: "Üyelik yazılımınız, ödeme altyapınız ve CRM'inizle size özel bağlantılar." },
      { t: "VIP destek", d: "Size atanmış otomasyon uzmanı, 4 saat içinde yanıt, aylık strateji görüşmesi." },
    ],
    cta: PLAN_CTA,
  },
];

const fmtUsd = n => "$" + n.toLocaleString("tr-TR");

/* ---------- FİYATLANDIRMA SSS (itiraz karşılama) ---------- */
const PRICING_FAQ = [
  ["Kurulum ne kadar sürüyor, ekibimden ne kadar zaman alacak?", "Basic 5–7 iş gününde, Pro 2–3 haftada, Enterprise ise entegrasyonlara göre 3–5 haftada yayına alınır. Sizden istediğimiz tek şey yaklaşık 1 saatlik başlangıç görüşmesi ve gerekli hesap erişimleri; kurulumu, testleri ve ekip eğitimini biz yaparız."],
  ["Uzun süreli taahhüt var mı? İptal edebilir miyim?", "Uzun süreli taahhüt yoktur. Kurulum ücreti tek seferliktir; aylık bakım ücreti ise her ay yenilenir ve bir sonraki yenileme tarihinden önce bildirim yaparak istediğiniz an iptal edebilirsiniz. Ayrıntılar hizmet ve abonelik koşullarında yer alır."],
  ["Yapay zekâ üyelerime yanlış bilgi verirse ne olur?", "AI resepsiyonist yalnızca sizin onayladığınız bilgilerle (fiyat, saat, ders programı) çalışır. Emin olmadığı konuları, şikâyetleri ve ödeme gibi hassas talepleri anında ekibinize devreder. Tüm konuşmaları panelden izleyebilir, istediğiniz an müdahale edebilirsiniz."],
  ["Kullandığım üyelik yazılımı, WhatsApp ve Instagram hesabımla çalışır mı?", "Evet. WhatsApp Business, Instagram, web formları ve takvim entegrasyonları paketlere dahildir. Mevcut üyelik, ödeme veya CRM yazılımınıza özel bağlantı gerekiyorsa bu Enterprise paketinde size özel kurulur."],
  ["Bu yatırımın geri dönüşünü nasıl ölçeceğim?", "Her sistem ölçümle birlikte kurulur: gelen talep sayısı, yanıt süresi, randevuya ve üyeliğe dönüşüm oranı panelinizde görünür. Böylece sistemin kaç yeni üye getirdiğini tahminle değil, veriyle görürsünüz."],
  ["Küçük başlayıp sonra paket yükseltebilir miyim?", "Evet. Paketler katman mantığıyla tasarlandı; Basic'te kurulan her şey Pro ve Enterprise'da aynen korunur, üzerine yeni katmanlar eklenir. Yükseltmede sistem sıfırdan kurulmaz."],
];

/* ---------- SSS AKORDEON ---------- */
function FaqAccordion({ items, isMobile }) {
  const [open, setOpen] = useState(null);
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
      {items.map(([q, a], i) => {
        const isOpen = open === i;
        return (
          <Card key={q} hover={false} style={{ padding: isMobile ? "6px 18px" : "6px 26px" }}>
            <button
              onClick={() => setOpen(isOpen ? null : i)}
              aria-expanded={isOpen}
              style={{
                display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16,
                width: "100%", background: "transparent", border: "none", cursor: "pointer",
                padding: isMobile ? "18px 0" : "22px 0", textAlign: "left",
                fontFamily: "var(--font-body)", fontSize: isMobile ? 15 : 17, fontWeight: 600,
                color: isOpen ? "var(--accent)" : "var(--text-strong)",
                transition: "var(--transition-base)",
              }}
            >
              {q}
              <span style={{ flexShrink: 0, display: "inline-flex", transform: isOpen ? "rotate(180deg)" : "none", transition: "var(--transition-base)" }}>
                <Icon name="chevron-down" size={20} color={isOpen ? "var(--accent)" : "var(--text-subtle)"} />
              </span>
            </button>
            {isOpen && (
              <p style={{ fontSize: 15, lineHeight: 1.7, color: "var(--text-muted)", margin: 0, padding: "0 0 22px" }}>{a}</p>
            )}
          </Card>
        );
      })}
    </div>
  );
}

/* ---------- GENEL AKSİYON BANDI ---------- */
function PricingCTA({ title, text, label = PLAN_CTA, href, isMobile }) {
  return (
    <div style={{
      textAlign: "center", maxWidth: 860, margin: "0 auto",
      padding: isMobile ? "30px 20px" : "44px 40px",
      borderRadius: "var(--radius-xl)",
      background: "var(--surface-card)",
      border: "1px solid var(--border-strong)",
      boxShadow: "0 0 40px var(--accent-glow)",
    }}>
      <h3 style={{ fontSize: isMobile ? 22 : 28, color: "var(--text-strong)", margin: "0 0 10px", letterSpacing: "-0.02em" }}>{title}</h3>
      <p style={{ fontSize: isMobile ? 15 : 17, lineHeight: 1.6, color: "var(--text-muted)", margin: "0 auto 24px", maxWidth: 600 }}>{text}</p>
      <GradientButton href={href} size="md">{label}</GradientButton>
    </div>
  );
}

/* ---------- SÖZLEŞME ONAY KUTUSU ---------- */
/* Ödeme adımına geçmeden önce zorunlu onay. `accepted` state'i çağıran
   bölüm tutar; paket butonları onaylanana kadar pasif kalır. */
function ConsentBox({ accepted, onChange, isMobile }) {
  const [h, setH] = useState(false);
  return (
    <div style={{ display: isMobile ? "block" : "inline-block", maxWidth: 620, width: isMobile ? "100%" : undefined }}>
    <div style={{
      display: "flex",
      flexDirection: isMobile ? "column" : "row",
      alignItems: "flex-start", gap: isMobile ? 10 : 12,
      maxWidth: 620, width: isMobile ? "100%" : undefined, textAlign: "left",
      padding: isMobile ? "14px 16px" : "16px 22px",
      borderRadius: "var(--radius-md)",
      background: "var(--surface-card)",
      border: "1px solid " + (accepted ? "var(--border-strong)" : "var(--border-soft)"),
      boxShadow: accepted ? "0 0 22px var(--accent-glow)" : "var(--shadow-xs)",
      transition: "all 0.4s cubic-bezier(0.4,0,0.2,1)",
    }}>
      <label
        onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
        style={{ display: "flex", alignItems: "flex-start", gap: 12, cursor: "pointer", margin: 0 }}
      >
        <input
          type="checkbox"
          checked={accepted}
          onChange={e => onChange(e.target.checked)}
          aria-describedby="sozlesme-onay-metni"
          style={{
            flexShrink: 0, width: 19, height: 19, marginTop: 1,
            accentColor: "var(--accent)", cursor: "pointer",
            outline: h ? "3px solid var(--accent-soft)" : "none",
            borderRadius: 4,
          }}
        />
        <span id="sozlesme-onay-metni" style={{ fontSize: isMobile ? 13 : 14, lineHeight: 1.55, color: "var(--text-body)", fontWeight: 500 }}>
          Hizmet ve abonelik koşullarını okudum, kabul ediyorum.
        </span>
      </label>
      <a
        href="sozlesme.html" target="_blank" rel="noopener"
        style={{
          flexShrink: 0, display: "inline-flex", alignItems: "center", gap: 5,
          fontSize: isMobile ? 13 : 14, fontWeight: 600, color: "var(--accent)",
          textDecoration: "underline", textUnderlineOffset: 3,
          marginTop: 1, marginLeft: isMobile ? 31 : 0,
        }}
        onMouseEnter={e => e.currentTarget.style.color = "var(--accent-hover)"}
        onMouseLeave={e => e.currentTarget.style.color = "var(--accent)"}
      >
        Sözleşmeyi görüntüle
        <Icon name="external-link" size={13} color="currentColor" />
      </a>
    </div>
    </div>
  );
}

/* ---------- TEK PAKET KARTI ---------- */
function PlanCard({ plan, isMobile, isTablet, href, locked }) {
  const wide = !isMobile && !isTablet;
  const label = plan.cta;
  const inner = (
    <Card
      hover={!plan.featured}
      glow={false}
      style={{
        position: "relative", overflow: "hidden", height: "100%",
        display: "flex", flexDirection: "column",
        padding: isMobile ? "30px 22px" : plan.featured ? "40px 32px" : "34px 28px",
        borderRadius: "var(--radius-xl)",
        border: plan.featured ? "none" : "1px solid var(--border-hairline)",
      }}
    >
      <div style={{ position: "absolute", top: "-38%", right: "-24%", width: 260, height: 260, background: plan.tint, filter: "blur(70px)", borderRadius: "50%", pointerEvents: "none" }} />

      {/* başlık */}
      <div style={{ position: "relative", display: "flex", alignItems: "center", gap: 12, marginBottom: 6 }}>
        <span style={{ display: "flex", width: 38, height: 38, borderRadius: 10, alignItems: "center", justifyContent: "center", background: plan.tint }}>
          <Icon name={plan.icon} size={19} color={plan.tone} />
        </span>
        <h3 style={{ fontSize: isMobile ? 26 : 30, color: plan.tone, margin: 0, letterSpacing: "-0.02em" }}>{plan.name}</h3>
      </div>
      <p style={{ position: "relative", fontSize: 14, color: "var(--text-subtle)", margin: "0 0 22px" }}>{plan.tagline}</p>

      {/* fiyat */}
      <div style={{ position: "relative", marginBottom: 22 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8, flexWrap: "wrap", minHeight: 22 }}>
          {plan.target && (
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--text-subtle)", textDecoration: "line-through", textDecorationColor: "rgba(100,116,139,0.55)" }}>{plan.target}</span>
          )}
          {!plan.featured && <Badge variant="soft" style={{ fontSize: 9, color: plan.tone, background: plan.tint }}>{plan.badge}</Badge>}
        </div>
        <div style={{ display: "flex", alignItems: "baseline", gap: 8, flexWrap: "wrap" }}>
          <span style={{ fontFamily: "var(--font-heading)", fontSize: isMobile ? 42 : 50, fontWeight: 800, letterSpacing: "-0.03em", lineHeight: 1, color: "var(--text-strong)" }}>{fmtUsd(plan.setup)}</span>
          <span style={{ fontSize: 14, fontWeight: 500, color: "var(--text-subtle)" }}>kurulum (tek seferlik)</span>
        </div>
        <div style={{ display: "flex", alignItems: "baseline", gap: 7, marginTop: 10, flexWrap: "wrap" }}>
          <span style={{ fontSize: 15, fontWeight: 600, color: "var(--text-muted)" }}>+</span>
          <span style={{ fontFamily: "var(--font-heading)", fontSize: 24, fontWeight: 700, color: plan.tone, lineHeight: 1 }}>{fmtUsd(plan.monthly)}</span>
          <span style={{ fontSize: 14, fontWeight: 500, color: "var(--text-subtle)" }}>/ ay bakım ve yönetim</span>
        </div>
      </div>

      <div style={{ height: 1, background: "var(--border-hairline)", margin: "0 0 22px" }} />

      {/* özellikler (katman) */}
      <div style={{ position: "relative", display: "flex", flexDirection: "column", gap: 14, flex: 1, marginBottom: 28 }}>
        {plan.includes && (
          <p style={{ fontSize: 13, fontWeight: 700, color: plan.tone, margin: 0 }}>{plan.includes}</p>
        )}
        {plan.features.map(f => (
          <div key={f.t} style={{ display: "flex", alignItems: "flex-start", gap: 11 }}>
            <span style={{ display: "flex", flexShrink: 0, width: 20, height: 20, borderRadius: "50%", alignItems: "center", justifyContent: "center", background: plan.tint, marginTop: 1 }}>
              <Icon name="check" size={12} color={plan.tone} />
            </span>
            <span style={{ fontSize: 14, lineHeight: 1.45, color: "var(--text-muted)" }}>
              <strong style={{ display: "block", fontWeight: 700, color: "var(--text-strong)" }}>{f.t}</strong>
              {f.d}
            </span>
          </div>
        ))}
      </div>

      {locked ? (
        <div style={{ position: "relative" }}>
          <Button
            as="button" disabled size="md"
            variant={plan.featured ? "primary" : "secondary"}
            style={{ width: "100%" }}
            title="Devam etmek için sözleşme onay kutusunu işaretleyin"
          >
            <Icon name="lock" size={14} color="currentColor" /> {label}
          </Button>
          <p style={{ fontSize: 11, lineHeight: 1.5, color: "var(--text-subtle)", textAlign: "center", margin: "10px 0 0" }}>
            Devam etmek için sözleşmeyi onaylayın
          </p>
        </div>
      ) : (
        <Button
          as="a" href={href} size="md"
          variant={plan.featured ? "primary" : "secondary"}
          style={{ width: "100%", position: "relative", ...(plan.featured ? {} : { borderColor: "var(--border-strong)", color: plan.tone }) }}
        >
          {label}
        </Button>
      )}
    </Card>
  );

  if (!plan.featured) {
    return <div style={{ height: "100%" }}>{inner}</div>;
  }

  return (
    <div style={{
      position: "relative", height: "100%",
      transform: wide ? "scale(1.05)" : "none",
      zIndex: 3,
    }}>
      {/* "en çok tercih edilen" şeridi */}
      <div style={{
        position: "absolute", top: -15, left: "50%", transform: "translateX(-50%)",
        zIndex: 4, whiteSpace: "nowrap",
      }}>
        <span style={{
          display: "inline-flex", alignItems: "center", gap: 7,
          padding: "7px 18px", borderRadius: "var(--radius-pill)",
          fontFamily: "var(--font-body)", fontSize: 10, fontWeight: 800,
          letterSpacing: "0.14em", textTransform: "uppercase", color: "#fff",
          backgroundImage: "linear-gradient(100deg, #059669, #10B981, #34D399)",
          boxShadow: "0 6px 20px rgba(16,185,129,0.45)",
          border: "2px solid var(--surface-raised)",
        }}>
          <Icon name="star" size={12} color="#fff" /> {plan.badge}
        </span>
      </div>
      <div style={{
        height: "100%", borderRadius: "calc(var(--radius-xl) + 3px)", padding: 3,
        background: "linear-gradient(135deg, var(--green-600), var(--accent), rgba(52,211,153,0.85))",
        boxShadow: "0 0 70px var(--accent-glow), var(--shadow-lg)",
      }}>
        {inner}
      </div>
    </div>
  );
}

/* ---------- 3'LÜ PAKET IZGARASI ---------- */
function PricingCards({ isMobile, isTablet, hrefFor, locked }) {
  const wide = !isMobile && !isTablet;
  return (
    <div style={{
      display: "grid",
      gridTemplateColumns: wide ? "repeat(3, 1fr)" : "1fr",
      gap: wide ? 26 : 22,
      alignItems: "stretch",
      maxWidth: wide ? 1160 : 560,
      margin: "0 auto",
      padding: "24px 0 8px",
    }}>
      {PLANS.map(p => (
        <PlanCard
          key={p.id}
          plan={p}
          isMobile={isMobile}
          isTablet={isTablet}
          href={hrefFor ? hrefFor(p) : "#contact"}
          locked={locked}
        />
      ))}
    </div>
  );
}

/* ---------- KURUCU ÜYE BANDI ---------- */
function FounderBanner({ isMobile }) {
  return (
    <div style={{
      display: "inline-flex", alignItems: "center", gap: 10,
      padding: isMobile ? "9px 16px" : "10px 20px",
      borderRadius: "var(--radius-pill)",
      background: "var(--surface-card)",
      border: "1px solid var(--border-strong)",
      boxShadow: "0 0 24px var(--accent-glow)",
    }}>
      <span className="ds-status-dot" />
      <span style={{ fontSize: isMobile ? 11 : 12, fontWeight: 700, letterSpacing: "0.06em", color: "var(--text-body)", textTransform: "uppercase" }}>
        {FOUNDER_NOTE}
      </span>
    </div>
  );
}

window.AiboloneShared = { useResponsive, Icon, GradientButton, ConsentBox, PLANS, PricingCards, FounderBanner, FOUNDER_NOTE, PRICING_FAQ, FaqAccordion, PricingCTA };
})();