// Pricing Plans section — 3 tariffs with monthly/yearly toggle.
// Values mirror the roadmap: Başlangıç 999/833, Profesyonel 1999/1666, Kurumsal 4999/4166.

const SectionWrap = window.SectionWrap;
const SectionHead = window.SectionHead;

const { useState: usePState } = React;

const fmtTry = (n) => n.toLocaleString('tr-TR') + '\u20BA';

const PLANS = [
  {
    id: 'baslangic',
    name: 'Başlangıç',
    tag: 'Küçük mağazalar için',
    monthly: 999,
    yearly: 833,
    accent: '#5de6ff',
    features: [
      'Tüm pazaryerleri (TY, SH, HB, n11)',
      '1 mağaza / pazaryeri',
      '5.000 AI kredisi / ay',
      '500 MB depolama',
      '1 kullanıcı',
      'E-posta desteği',
      'Temel otomasyonlar',
    ],
    cta: 'Bekleme Listesine Katıl',
  },
  {
    id: 'profesyonel',
    name: 'Profesyonel',
    tag: 'En çok tercih edilen',
    monthly: 1999,
    yearly: 1666,
    accent: '#FF6B00',
    popular: true,
    features: [
      'Tüm pazaryerleri (TY, SH, HB, n11)',
      '3 mağaza / pazaryeri',
      '12.000 AI kredisi / ay',
      '2 GB depolama',
      '3 kullanıcı',
      'Öncelikli canlı destek',
      'Tüm otomasyonlar + Genius AI',
      'Döviz tetikli fiyat kuralları',
      'Telegram bot ile uzaktan kontrol',
    ],
    cta: 'Bekleme Listesine Katıl',
  },
  {
    id: 'kurumsal',
    name: 'Kurumsal',
    tag: 'Çok mağazalı işletmeler',
    monthly: 4999,
    yearly: 4166,
    accent: '#FFC857',
    features: [
      'Sınırsız mağaza / pazaryeri',
      '25.000 AI kredisi / ay',
      '10 GB depolama',
      'Sınırsız kullanıcı (RBAC)',
      'Dedike müşteri temsilcisi',
      'Özel entegrasyonlar',
      'SLA garantisi',
      'Erken-erişim özellikler',
    ],
    cta: 'Satış ile Görüş',
  },
];

const CheckIcon = ({ color = '#FF8C33' }) => (
  <span style={{
    flexShrink: 0, width: 18, height: 18, borderRadius: 6,
    background: color + '26', color,
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    fontSize: 11, fontWeight: 800, marginTop: 2
  }}>✓</span>
);

const BillingToggle = ({ yearly, onChange }) => (
  <div style={{
    display: 'inline-flex', padding: 4, borderRadius: 9999,
    background: 'rgba(19,19,21,0.7)', border: '1px solid rgba(255,255,255,0.06)',
    backdropFilter: 'blur(12px)', gap: 4
  }}>
    {[
      { key: false, label: 'Aylık' },
      { key: true,  label: 'Yıllık', save: '-%17' },
    ].map(opt => {
      const active = yearly === opt.key;
      return (
        <button
          key={String(opt.key)}
          onClick={() => onChange(opt.key)}
          style={{
            padding: '8px 18px', borderRadius: 9999,
            background: active ? '#FF6B00' : 'transparent',
            color: active ? '#1a0d00' : '#a98a7d',
            border: 'none', cursor: 'pointer',
            fontFamily: 'Inter', fontSize: 13, fontWeight: 700,
            letterSpacing: '-0.01em', transition: 'all .25s ease',
            boxShadow: active ? '0 0 24px rgba(255,107,0,0.35)' : 'none',
            display: 'inline-flex', alignItems: 'center', gap: 8,
          }}
        >
          {opt.label}
          {opt.save && (
            <span style={{
              fontSize: 10, padding: '2px 6px', borderRadius: 6,
              background: active ? 'rgba(26,13,0,0.25)' : 'rgba(52,211,153,0.15)',
              color: active ? '#1a0d00' : '#34d399',
              fontFamily: 'JetBrains Mono', fontWeight: 800, letterSpacing: '0.05em'
            }}>{opt.save}</span>
          )}
        </button>
      );
    })}
  </div>
);

const PlanCard = ({ plan, yearly, isMobile = false, onToggleYearly }) => {
  const price = yearly ? plan.yearly : plan.monthly;
  const alt   = yearly ? plan.monthly : null;
  const isPopular = !!plan.popular;

  return (
    <div style={{
      position: 'relative',
      padding: isMobile ? '28px 20px 22px' : '36px 30px 32px',
      borderRadius: isMobile ? 16 : 20,
      background: isPopular
        ? 'linear-gradient(180deg, rgba(40,22,5,0.85), rgba(20,14,10,0.75))'
        : 'linear-gradient(180deg, rgba(28,28,32,0.75), rgba(20,20,24,0.55))',
      border: `1px solid ${isPopular ? 'rgba(255,107,0,0.4)' : 'rgba(255,255,255,0.06)'}`,
      boxShadow: isPopular
        ? '0 0 80px rgba(255,107,0,0.2), 0 20px 40px rgba(0,0,0,0.4)'
        : '0 20px 40px rgba(0,0,0,0.25)',
      display: 'flex', flexDirection: 'column',
      // No vertical offset on Mobile — cards stack, offset would create weird gaps
      transform: (isPopular && !isMobile) ? 'translateY(-12px)' : 'none',
      transition: 'transform .3s ease, box-shadow .3s ease',
      minWidth: 0,
    }}>
      {isPopular && (
        <div style={{
          position: 'absolute', top: -14, left: '50%', transform: 'translateX(-50%)',
          padding: isMobile ? '5px 12px' : '6px 14px',
          borderRadius: 9999,
          background: 'linear-gradient(90deg, #FF8C33, #FF6B00)',
          color: '#1a0d00', fontSize: isMobile ? 9 : 10, fontWeight: 900,
          letterSpacing: '0.18em', textTransform: 'uppercase',
          fontFamily: 'Space Grotesk',
          boxShadow: '0 0 28px rgba(255,107,0,0.5)',
          whiteSpace: 'nowrap',
        }}>En Popüler</div>
      )}

      {/* Mobile-only: per-card Billing-Toggle so user doesn't need to scroll back up */}
      {isMobile && onToggleYearly && (
        <div style={{ display:'flex', justifyContent:'center', marginBottom: 18 }}>
          <BillingToggle yearly={yearly} onChange={onToggleYearly} />
        </div>
      )}

      <div style={{
        fontFamily: 'Space Grotesk', fontSize: isMobile ? 10 : 11,
        color: plan.accent, letterSpacing: '0.18em',
        textTransform: 'uppercase', fontWeight: 800, marginBottom: isMobile ? 6 : 8,
      }}>{plan.tag}</div>

      <div style={{
        fontFamily: 'Manrope', fontSize: isMobile ? 24 : 28, fontWeight: 800,
        color: '#e5e1e4', letterSpacing: '-0.03em', marginBottom: isMobile ? 16 : 24,
      }}>{plan.name}</div>

      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 6, flexWrap: 'wrap' }}>
        <div style={{
          fontFamily: 'Manrope', fontSize: isMobile ? 36 : 44, fontWeight: 900,
          color: '#e5e1e4', letterSpacing: '-0.04em',
          fontVariantNumeric: 'tabular-nums',
        }}>{fmtTry(price)}</div>
        <div style={{ fontSize: isMobile ? 12 : 13, color: '#a98a7d', fontFamily: 'Inter' }}>/ ay</div>
      </div>

      <div style={{
        fontSize: isMobile ? 11 : 12,
        color: '#6b655f', fontFamily: 'JetBrains Mono',
        marginBottom: isMobile ? 20 : 28, minHeight: 16,
      }}>
        {yearly
          ? <>yıllık ödemede · <span style={{textDecoration:'line-through',opacity:0.6}}>{fmtTry(alt)}</span></>
          : <>aylık taahhütsüz</>
        }
      </div>

      <ul style={{
        listStyle: 'none', padding: 0, margin: isMobile ? '0 0 20px' : '0 0 32px',
        display: 'flex', flexDirection: 'column',
        gap: isMobile ? 10 : 12, flex: 1,
      }}>
        {plan.features.map((f, i) => (
          <li key={i} style={{
            display: 'flex', alignItems: 'flex-start', gap: isMobile ? 8 : 10,
            fontSize: isMobile ? 13 : 14, lineHeight: 1.4, color: '#cfc4bf'
          }}>
            <CheckIcon color={isPopular ? '#FF8C33' : plan.accent} />
            <span>{f}</span>
          </li>
        ))}
      </ul>

      <button style={{
        width: '100%',
        padding: isMobile ? '12px 18px' : '14px 22px',
        borderRadius: 12,
        background: isPopular ? '#FF6B00' : 'rgba(255,255,255,0.04)',
        color: isPopular ? '#1a0d00' : '#e5e1e4',
        border: isPopular ? 'none' : '1px solid rgba(255,255,255,0.12)',
        fontFamily: 'Inter', fontSize: isMobile ? 13 : 14, fontWeight: 700,
        letterSpacing: '-0.01em', cursor: 'pointer',
        boxShadow: isPopular ? '0 0 32px rgba(255,107,0,0.35)' : 'none',
        transition: 'transform .2s ease, box-shadow .2s ease',
      }}
      onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.02)'; }}
      onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; }}
      >
        {plan.cta} →
      </button>
    </div>
  );
};

const PricingPlansSection = () => {
  const [yearly, setYearly] = usePState(false);
  const [isMobile, setIsMobile] = usePState(
    typeof window !== 'undefined' && window.innerWidth < 768
  );
  React.useEffect(() => {
    const onResize = () => setIsMobile(window.innerWidth < 768);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  return (
    <SectionWrap id="pricing" label="08.5 Pricing Plans" padY={isMobile ? 80 : 160} accent="#FF6B00">
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: isMobile ? '0 16px' : '0 32px' }}>
        <SectionHead
          eyebrow="fiyatlandırma"
          eyebrowColor="#FF8C33"
          title="Dürüst fiyatlandırma,"
          titleAccent="gizli ücret yok"
          lede="Tek abonelik, gelecek güncellemeler dahildir. Yükseltme baskısı yoktur, sınırsız mağaza için ek ücret alınmaz. İşletmenize uygun planı seçin."
        />

        {/* Central toggle — Desktop only. On Mobile each card has its own. */}
        {!isMobile && (
          <div style={{ display: 'flex', justifyContent: 'center', marginTop: 36, marginBottom: 56 }}>
            <BillingToggle yearly={yearly} onChange={setYearly} />
          </div>
        )}

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
          gap: isMobile ? 26 : 24,
          alignItems: 'stretch',
          // extra top padding on Mobile so "En Popüler" badge above Profesyonel has room
          paddingTop: isMobile ? 14 : 0,
          marginTop: isMobile ? 28 : 0,
        }}>
          {PLANS.map(p => (
            <PlanCard
              key={p.id}
              plan={p}
              yearly={yearly}
              isMobile={isMobile}
              onToggleYearly={setYearly}
            />
          ))}
        </div>

        <div style={{
          marginTop: isMobile ? 28 : 48,
          padding: isMobile ? '14px 16px' : '18px 24px',
          borderRadius: 14,
          background: 'rgba(19,19,21,0.6)',
          border: '1px solid rgba(255,255,255,0.05)',
          display: 'flex',
          flexDirection: isMobile ? 'column' : 'row',
          alignItems: isMobile ? 'center' : 'center',
          gap: isMobile ? 12 : 20,
          flexWrap: 'wrap',
          justifyContent: 'space-between',
        }}>
          <div style={{
            fontSize: isMobile ? 10 : 12,
            fontFamily: 'JetBrains Mono',
            color: '#7a7570', letterSpacing: '0.12em', textTransform: 'uppercase',
            textAlign: isMobile ? 'center' : 'left',
          }}>Tüm planlar şunları içerir</div>
          <div style={{
            display: 'flex',
            gap: isMobile ? 10 : 22,
            flexWrap: 'wrap',
            justifyContent: isMobile ? 'center' : 'flex-start',
          }}>
            {[
              'KVKK uyumlu', 'SSL + AES-256', 'Ücretsiz güncelleme',
              'Taahhütsüz iptal', 'Veri ihracı', 'API erişimi',
            ].map(c => (
              <div key={c} style={{
                display: 'flex', alignItems: 'center', gap: 6,
                fontSize: isMobile ? 11 : 13, color: '#cfc4bf',
              }}>
                <span style={{
                  width: 5, height: 5, borderRadius: 9999,
                  background: '#34d399', boxShadow: '0 0 6px #34d399'
                }} />
                {c}
              </div>
            ))}
          </div>
        </div>
      </div>
    </SectionWrap>
  );
};

window.PricingPlansSection = PricingPlansSection;