/* ═══════════════ SafeG Landing · SECTIONS C (plans, trust, cta, footer) ═══════════════ */

/* ════ PLANLAR ════ */
const Plans = () => {
  // Aylık ↔ Yıllık. Yıllık = aylık × 10 (2 ay hediye). priceY = yıllık toplam.
  const [yearly, setYearly] = useState(false);
  const plans = [
    {
      name: 'Ücretsiz', price: '0', priceY: '0', tone: 'slate', cta: 'Ücretsiz Başla',
      tagline: 'Bağ kurmaya başla',
      feats: ['2 yer (ev, okul)', 'Canlı konum & Çevre', 'Kişi-hedefli bildirim', 'SOS + Kanıt Kaydı', 'Kalp gönder'],
    },
    {
      name: 'Plus', price: '59,99', priceY: '599,99', tone: 'blue', cta: 'Sınırları Kaldır',
      tagline: 'Daha fazla yer, daha çok geçmiş',
      feats: ['5 yer', '7 gün hareket geçmişi', 'Yüksek hız uyarıları', 'Tüm Ücretsiz özellikleri', 'Öncelikli destek'],
    },
    {
      name: 'Family', price: '99,99', priceY: '999,99', tone: 'gold', popular: true, cta: 'Aileyi Koruma Altına Al',
      tagline: 'Ailenin tam paketi',
      feats: ['Sınırsız yer', '30 gün hareket geçmişi', '🎬 Sinematik Rota Raporu', 'Zamanlanmış Alarm', 'Tüm Plus özellikleri'],
    },
  ];
  return (
    <section id="planlar" data-stop="09" data-stop-label="Planlar" className="relative py-24 sm:py-32 overflow-hidden">
      <Aurora variant="gold" />
      <div className="relative max-w-6xl mx-auto px-5">
        <Reveal className="text-center max-w-2xl mx-auto">
          <Eyebrow color="#FCD34D">Planlar</Eyebrow>
          <h2 className="mt-4 font-extrabold text-white tracking-tight" style={{ fontSize: 'clamp(30px,4.4vw,52px)', lineHeight: 1.05 }}>Her aileye uygun bir huzur.</h2>
          <p className="mt-4 text-slate-400 text-[16px]">İstediğin an yükselt veya iptal et. Reklam yok, gizli ücret yok.</p>
        </Reveal>
        {/* Aylık / Yıllık toggle */}
        <Reveal className="flex justify-center mt-8">
          <div className="inline-flex items-center gap-1 rounded-full p-1" style={{ background: 'rgba(15,23,42,.05)', border: '1px solid rgba(15,23,42,.08)' }}>
            <button onClick={() => setYearly(false)} className="rounded-full px-5 py-2 text-[14px] font-bold transition-all"
              style={!yearly ? { background: '#fff', color: '#0F172A', boxShadow: '0 2px 8px rgba(15,23,42,.12)' } : { color: '#64748B', background: 'transparent' }}>Aylık</button>
            <button onClick={() => setYearly(true)} className="rounded-full px-5 py-2 text-[14px] font-bold transition-all inline-flex items-center gap-2"
              style={yearly ? { background: '#fff', color: '#0F172A', boxShadow: '0 2px 8px rgba(15,23,42,.12)' } : { color: '#64748B', background: 'transparent' }}>
              Yıllık<span className="rounded-full px-2 py-0.5 text-[10.5px] font-extrabold" style={{ background: 'rgba(34,197,94,.16)', color: '#16A34A' }}>2 AY HEDİYE</span>
            </button>
          </div>
        </Reveal>
        <div className="mt-10 grid md:grid-cols-3 gap-5 items-start">
          {plans.map((p, i) => <Reveal key={p.name} delay={i + 1}><PlanCard {...p} yearly={yearly} /></Reveal>)}
        </div>
        <Reveal className="text-center mt-8"><p className="text-slate-500 text-[13.5px]">{yearly ? 'Fiyatlar yıllık · ₺ · KDV dahil · 12 ay = 10 ay ücreti (2 ay hediye)' : 'Fiyatlar aylık · ₺ · KDV dahil · İlk 14 gün koşulsuz iade'}</p></Reveal>
      </div>
    </section>
  );
};
const PlanCard = ({ name, price, priceY, tone, popular, tagline, feats, cta, yearly }) => {
  const shown = yearly ? priceY : price;
  const accent = { slate: '#94A3B8', blue: '#3678F9', gold: '#E6B450' }[tone];
  const isGold = tone === 'gold';
  return (
    <div className={`relative rounded-[28px] p-7 h-full flex flex-col ${popular ? '' : 'glass glass-edge'}`}
      style={popular
        ? { background: 'linear-gradient(180deg,#FFFBEB,#FEF7E0)', border: '1.5px solid rgba(230,180,80,.55)', boxShadow: '0 30px 70px rgba(230,180,80,.22)', transform: 'translateY(-8px)' }
        : { border: '1px solid rgba(15,23,42,.07)' }}>
      {popular && (
        <span className="absolute -top-3.5 left-1/2 -translate-x-1/2 inline-flex items-center gap-1.5 rounded-full px-4 py-1.5 text-[12px] font-extrabold" style={{ background: 'linear-gradient(100deg,#FDE68A,#E6B450)', color: '#3a2a06', boxShadow: '0 8px 20px rgba(230,180,80,.4)' }}>
          <IconStar s={13} c="#3a2a06" />EN POPÜLER
        </span>
      )}
      <div className="flex items-center gap-2">
        <h3 className={`font-extrabold text-[22px] tracking-tight ${isGold ? 'grad-gold' : 'text-white'}`}>{name}</h3>
      </div>
      <p className="text-slate-400 text-[13.5px] mt-1">{tagline}</p>
      <div className="flex items-end gap-1.5 mt-5">
        <span className="font-extrabold text-white tracking-tight" style={{ fontSize: 46, lineHeight: 1 }}>{shown === '0' ? '₺0' : `₺${shown}`}</span>
        <span className="text-slate-500 text-[14px] mb-1.5">{shown === '0' ? '' : (yearly ? '/yıl' : '/ay')}</span>
      </div>
      {yearly && shown !== '0' && (
        <div className="text-[12.5px] mt-1.5 font-semibold" style={{ color: '#16A34A' }}>≈ ₺{Math.round(Number(String(priceY).replace(',', '.')) / 12)}/ay · 2 ay hediye</div>
      )}
      <a href="#indir" className="mt-6 inline-flex items-center justify-center gap-2 rounded-2xl h-[52px] font-bold transition-transform hover:-translate-y-0.5"
        style={isGold
          ? { background: 'linear-gradient(100deg,#FDE68A,#E6B450)', color: '#3a2a06', boxShadow: '0 12px 30px rgba(230,180,80,.4)' }
          : tone === 'blue'
            ? { background: 'linear-gradient(100deg,#1D4ED8,#3678F9)', color: '#fff', boxShadow: '0 12px 28px rgba(54,120,249,.4)' }
            : { background: '#F1F5F9', color: '#1D4ED8', border: '1px solid #E2E8F0' }}>
        {cta}<IconArrowR s={16} c={isGold ? '#3a2a06' : (tone === 'blue' ? '#fff' : '#1D4ED8')} />
      </a>
      <ul className="mt-6 space-y-3 flex-1">
        {feats.map((f, i) => (
          <li key={i} className="flex items-start gap-2.5 text-[14px] text-slate-300">
            <span className="flex items-center justify-center rounded-full shrink-0 mt-0.5" style={{ width: 19, height: 19, background: isGold ? 'rgba(230,180,80,.2)' : 'rgba(34,197,94,.16)' }}>
              <IconCheck s={12} c={isGold ? '#FCD34D' : '#86EFAC'} sw={2.6} />
            </span>{f}
          </li>
        ))}
      </ul>
    </div>
  );
};

/* ════ GÜVEN ŞERİDİ ════ */
const Trust = () => (
  <section data-stop="10" data-stop-label="Güven" className="relative py-20 overflow-hidden border-y" style={{ borderColor: 'rgba(255,255,255,.06)' }}>
    <div className="max-w-6xl mx-auto px-5">
      <div className="grid lg:grid-cols-[1fr_1.1fr] gap-12 items-center">
        {/* badges */}
        <Reveal>
          <div className="flex flex-wrap gap-3">
            {[[<IconLock s={18} c="#0EA5E9" />, 'AES-256 şifreleme'], [<IconShieldOk s={18} c="#16A34A" />, 'KVKK uyumlu'], [<IconGlobe s={18} c="#3678F9" />, "Türkiye'de tasarlandı"], [<IconFinger s={18} c="#7C5CFC" />, 'Biyometrik kilit']].map(([ic, t], i) => (
              <span key={i} className="inline-flex items-center gap-2 rounded-full px-4 py-2.5 text-[13.5px] font-semibold text-slate-200" style={{ background: '#F4F6FA', border: '1px solid #E2E8F0' }}>{ic}{t}</span>
            ))}
          </div>
          <div className="mt-8 flex items-center gap-6">
            <div><div className="font-extrabold text-white tracking-tight" style={{ fontSize: 34 }}>0₺</div><div className="text-slate-500 text-[13px] mono mt-1">VERİ SATIŞI</div></div>
            <div className="w-px h-12 bg-white/10"></div>
            <div><div className="font-extrabold text-white tracking-tight" style={{ fontSize: 34 }}>AES-256</div><div className="text-slate-500 text-[13px] mono mt-1">ŞİFRELEME</div></div>
            <div className="w-px h-12 bg-white/10 hidden sm:block"></div>
            <div className="hidden sm:block"><div className="font-extrabold text-white tracking-tight" style={{ fontSize: 34 }}>KVKK</div><div className="text-slate-500 text-[13px] mono mt-1">TAM UYUMLU</div></div>
          </div>
        </Reveal>
        {/* reviews */}
        <Reveal delay={1}>
          <div className="grid sm:grid-cols-2 gap-4">
            {[
              ['"Zenly\'nin sıcaklığı geri döndü — ama bu sefer mahremiyetime saygılı."', 'Ayşe K.', 'AK', '#3678F9'],
              ['"SOS özelliği kızımı bir gece gerçekten rahatlattı. Panik yok, kanıt var."', 'Murat T.', 'MT', '#22C55E'],
              ['"Tüm aileye spam atmaması harika. Sadece bana bildirim geliyor."', 'Zeynep A.', 'ZA', '#E11D48'],
              ['"Pil dostu ve gerçekten şık. Eski uygulamamdan geçtim, hiç pişman değilim."', 'Can D.', 'CD', '#7C5CFC'],
            ].map(([q, n, av, c], i) => (
              <Glass key={i} className="p-5" style={{ border: '1px solid rgba(255,255,255,.08)' }}>
                <div className="flex gap-0.5 mb-2.5">{[0, 1, 2, 3, 4].map(k => <IconStar key={k} s={13} />)}</div>
                <p className="text-slate-200 text-[13.5px] leading-relaxed">{q}</p>
                <div className="flex items-center gap-2.5 mt-4">
                  <span className="flex items-center justify-center rounded-full text-white font-bold text-[11px]" style={{ width: 30, height: 30, background: c }}>{av}</span>
                  <span className="text-slate-400 text-[13px] font-semibold">{n}</span>
                </div>
              </Glass>
            ))}
          </div>
          <p className="mt-3 text-slate-500 text-[12px]">Temsili kullanıcı yorumlarıdır.</p>
        </Reveal>
      </div>
    </div>
  </section>
);

/* ════ FINAL CTA ════ */
const FinalCta = () => (
  <section id="indir" data-stop="11" data-stop-label="İndir" className="relative py-28 sm:py-40 overflow-hidden">
    <Aurora variant="blue" />
    <div className="absolute inset-0 pointer-events-none">
      <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full" style={{ width: 720, height: 720, background: 'radial-gradient(circle,rgba(56,189,248,.16),transparent 60%)', filter: 'blur(30px)' }}></div>
    </div>
    <div className="relative max-w-3xl mx-auto px-5 text-center">
      <Reveal><Logo s={40} /></Reveal>
      <Reveal delay={1}>
        <h2 className="mt-8 font-extrabold text-white tracking-tight mx-auto" style={{ fontSize: 'clamp(36px,6vw,72px)', lineHeight: 1 }}>
          Bugün ailene<br /><span className="grad-brand">huzur indir.</span>
        </h2>
      </Reveal>
      <Reveal delay={2}>
        <p className="mt-6 text-slate-300 text-[18px] mx-auto max-w-lg">Gözetim değil, huzur. Casusluk değil, bağ. Ücretsiz başla — kartsız, taahhütsüz.</p>
      </Reveal>
      <Reveal delay={3}>
        <div className="mt-9 flex flex-wrap justify-center gap-3"><AppleBadge /><GoogleBadge /></div>
      </Reveal>
      <Reveal delay={4}>
        <div className="mt-7 inline-flex items-center gap-2 text-slate-400 text-[13.5px]"><IconLock s={15} c="#7DD3FC" />Konumun senin — asla satmayız.</div>
      </Reveal>
    </div>
  </section>
);

/* ════ FOOTER ════ */
const Footer = () => (
  <footer className="relative pt-16 pb-10 border-t" style={{ borderColor: 'rgba(15,23,42,.08)', background: 'linear-gradient(#FFFFFF,#F8FAFC)' }}>
    <div className="max-w-6xl mx-auto px-5">
      <div className="grid sm:grid-cols-2 lg:grid-cols-[1.4fr_1fr_1fr_1fr] gap-10">
        <div>
          <Logo s={28} />
          <p className="mt-4 text-slate-400 text-[14px] leading-relaxed max-w-xs">Ailenin huzuru, avucunda. Türkiye'de tasarlanan, mahremiyet-öncelikli aile güvenliği uygulaması.</p>
          <div className="mt-5 flex gap-2.5">
            {['IG', 'X', 'in', 'TT'].map(s => (
              <a key={s} href="#" className="flex items-center justify-center rounded-xl text-slate-300 hover:text-white hover:bg-white/10 transition-colors" style={{ width: 38, height: 38, background: '#F1F5F9', border: '1px solid #E2E8F0', fontSize: 12, fontWeight: 700 }}>{s}</a>
            ))}
          </div>
        </div>
        {[
          ['Ürün', [['Özellikler', '#ozellikler'], ['Sinematik Rapor', '#sinematik'], ['SOS', '#sos'], ['Planlar', '#planlar']]],
          ['Şirket', [['Hakkımızda', 'hakkimizda.html'], ['Manifesto', 'manifesto.html'], ['İletişim', 'iletisim.html']]],
          ['Yasal', [['Gizlilik (KVKK)', 'gizlilik.html'], ['Kullanım Şartları', 'kullanim-sartlari.html'], ['Çerezler', 'cerezler.html'], ['Güvenlik', 'guvenlik.html']]],
        ].map(([h, items]) => (
          <div key={h}>
            <div className="mono text-[11px] tracking-[0.16em] uppercase text-slate-500 font-semibold">{h}</div>
            <ul className="mt-4 space-y-2.5">
              {items.map(([it, href]) => <li key={it}><a href={href} className="text-slate-400 hover:text-white text-[14px] transition-colors">{it}</a></li>)}
            </ul>
          </div>
        ))}
      </div>
      <div className="mt-12 pt-6 border-t flex flex-col sm:flex-row items-center justify-between gap-4" style={{ borderColor: 'rgba(15,23,42,.08)' }}>
        <span className="text-slate-500 text-[13px]">© 2026 SafeG · gosafeg.com · Tüm hakları saklıdır.</span>
        <span className="flex items-center gap-2 text-slate-500 text-[13px]"><IconLock s={14} c="#7DD3FC" />Konum verini asla satmayız.</span>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Plans, Trust, FinalCta, Footer });