/* ═══════════════ SafeG Landing · SECTIONS B (cinematic, sos, privacy, warmth, how) ═══════════════ */

/* ════ ⭐ CINEMATIC ROUTE SHOWCASE ════ */
const Cinematic = () => (
  <section id="sinematik" data-stop="04" data-stop-label="Sinematik" className="relative py-28 sm:py-36 overflow-hidden" style={{ background: 'linear-gradient(180deg,#070B16,#060A14 50%,#070B16)' }}>
    {/* light → dark transition into the cinematic island */}
    <div className="absolute top-0 left-0 right-0 pointer-events-none" style={{ height: 160, background: 'linear-gradient(#FFFFFF, rgba(255,255,255,0))', zIndex: 3 }}></div>
    {/* full-bleed dark map glow */}
    <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: 900, height: 900, background: 'radial-gradient(circle,rgba(56,189,248,.12),transparent 60%)', filter: 'blur(30px)' }}></div>
    </div>
    <div className="relative max-w-6xl mx-auto px-5 grid lg:grid-cols-[0.95fr_1.05fr] gap-12 items-center">
      <div>
        <Reveal><PillBadge icon={<IconSpark s={14} />} tone="cyan" dark>Sadece Family Paketinde</PillBadge></Reveal>
        <Reveal delay={1}>
          <h2 className="mt-5 font-extrabold text-white tracking-tight" style={{ fontSize: 'clamp(34px,5vw,62px)', lineHeight: 0.98 }}>
            Haftalık sürüşleri<br /><span className="grad-brand">3D bir filme dönüştürün.</span>
          </h2>
        </Reveal>
        <Reveal delay={2}>
          <p className="mt-6 text-slate-300 text-[17px] leading-relaxed max-w-[460px]">
            Spotify Wrapped heyecanını ailenizin rotalarına taşıdık. Haftanın en uzun veya en sık kullanılan rotasını, karanlık harita üzerinde neon iz bırakan bir 3D animasyonla izleyin. Gidilen kilometreler, hız özetleri ve duraklar artık sıkıcı bir liste değil, <span className="text-white font-semibold">premium bir rapor.</span>
          </p>
        </Reveal>
        <Reveal delay={3}>
          <div className="mt-8 grid grid-cols-3 gap-3 max-w-md">
            {[['18,4', 'km', 'Mesafe', '#7DD3FC'], ['32', 'dk', 'Süre', '#60A5FA'], ['72', 'km/sa', 'Maks. hız', '#86EFAC']].map(([v, u, l, c], i) => (
              <Glass key={i} className="p-4 text-center" style={{ background: 'rgba(13,19,34,.5)', border: '1px solid rgba(255,255,255,.1)' }}>
                <div className="font-extrabold tracking-tight" style={{ color: c, fontSize: 26 }}>
                  <CountUp to={parseFloat(String(v).replace(',', '.'))} decimals={String(v).includes(',') ? 1 : 0} /><span className="text-[13px] font-semibold ml-0.5 text-slate-400">{u}</span>
                </div>
                <div className="mono text-[10px] tracking-wider text-slate-500 mt-1 uppercase">{l}</div>
              </Glass>
            ))}
          </div>
        </Reveal>
        <Reveal delay={4}>
          <a href="#planlar" className="mt-8 inline-flex items-center gap-2 text-[15px] font-bold text-cyan-300 hover:gap-3 transition-all">Raporu keşfet<IconArrowR s={17} c="#7DD3FC" /></a>
        </Reveal>
      </div>
      {/* cinematic phone */}
      <Reveal delay={2} className="flex justify-center lg:justify-end">
        <div className="relative" style={{ transform: 'perspective(1500px) rotateY(-12deg) rotateX(6deg)' }}>
          <div className="absolute -inset-10 rounded-full pointer-events-none" style={{ background: 'radial-gradient(circle,rgba(56,189,248,.28),transparent 62%)', filter: 'blur(24px)' }}></div>
          <Phone dark style={{ filter: 'drop-shadow(0 60px 80px rgba(0,0,0,.7))' }}><CinematicRouteScreen /></Phone>
          {/* play badge */}
          <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-30 flex items-center justify-center rounded-full" style={{ width: 58, height: 58, background: 'rgba(255,255,255,.12)', backdropFilter: 'blur(6px)', border: '1px solid rgba(255,255,255,.3)' }}>
            <IconPlay s={22} c="#fff" />
          </div>
        </div>
      </Reveal>
    </div>
  </section>
);

/* ════ 🆘 SOS — full-bleed dramatic ════ */
const SosSection = () => {
  const [holding, setHolding] = useState(false);
  return (
    <section id="sos" data-stop="05" data-stop-label="SOS" className="relative py-28 sm:py-36 overflow-hidden" style={{ background: 'radial-gradient(ellipse at 50% 40%,#2a0a14 0%,#10060c 55%,#070B16 100%)' }}>
      <Aurora variant="red" />
      <div className="relative max-w-6xl mx-auto px-5 grid lg:grid-cols-[1fr_0.9fr] gap-12 items-center">
        {/* interactive SOS */}
        <Reveal className="flex flex-col items-center lg:items-start order-2 lg:order-1">
          <div className="relative flex items-center justify-center w-full" style={{ minHeight: 340 }}>
            <div className="absolute rounded-full" style={{ width: 320, height: 320, background: 'radial-gradient(circle,rgba(239,68,68,.32),transparent 64%)', filter: 'blur(16px)' }}></div>
            {/* rings */}
            <span className="absolute rounded-full" style={{ width: 280, height: 280, border: '1.5px solid rgba(239,68,68,.3)', animation: 'sosRing 2.2s ease-out infinite' }}></span>
            <span className="absolute rounded-full" style={{ width: 280, height: 280, border: '1.5px solid rgba(239,68,68,.3)', animation: 'sosRing 2.2s ease-out infinite 1.1s' }}></span>
            {/* progress arc */}
            <svg width="300" height="300" viewBox="0 0 300 300" className="absolute" style={{ transform: 'rotate(-90deg)' }}>
              <circle cx="150" cy="150" r="138" fill="none" stroke="rgba(255,255,255,.08)" strokeWidth="4" />
              <circle cx="150" cy="150" r="138" fill="none" stroke="#F59E0B" strokeWidth="4" strokeLinecap="round" strokeDasharray={2 * Math.PI * 138} strokeDashoffset={2 * Math.PI * 138 * (holding ? 0.04 : 1)} style={{ transition: 'stroke-dashoffset 3s linear' }} />
            </svg>
            <button
              onMouseDown={() => setHolding(true)} onMouseUp={() => setHolding(false)} onMouseLeave={() => setHolding(false)}
              onTouchStart={(e) => { e.preventDefault(); setHolding(true); }} onTouchEnd={() => setHolding(false)}
              aria-label="SOS — 3 saniye basılı tut"
              className="relative rounded-full flex flex-col items-center justify-center select-none cursor-pointer"
              style={{ width: 230, height: 230, background: 'radial-gradient(circle at 34% 26%,#FB7185,#EF4444 52%,#DC2626)', boxShadow: '0 24px 70px rgba(239,68,68,.5)', animation: holding ? 'none' : 'sosPulse 1.4s ease-in-out infinite', transform: holding ? 'scale(0.96)' : 'scale(1)', transition: 'transform .2s' }}>
              <ShieldFill s={48} c="#fff" />
              <span className="text-white font-black mt-2" style={{ fontSize: 46, letterSpacing: '3px' }}>SOS</span>
            </button>
          </div>
          <p className="mt-2 text-slate-400 text-[13.5px] text-center lg:text-left">{holding ? 'Çevreniz bilgilendiriliyor…' : 'Deneyin: basılı tutun →'}</p>
        </Reveal>
        {/* copy */}
        <Reveal delay={1} className="order-1 lg:order-2">
          <PillBadge icon={<IconAlert s={14} />} tone="red" dark>Acil Durum & Kanıt</PillBadge>
          <h2 className="mt-5 font-extrabold text-white tracking-tight" style={{ fontSize: 'clamp(32px,4.8vw,58px)', lineHeight: 1 }}>
            O an geldiğinde panik yok,<br /><span style={{ color: '#FCA5A5' }}>SafeG var.</span>
          </h2>
          <p className="mt-5 text-slate-300 text-[17px] leading-relaxed max-w-[440px]">Sadece 3 saniye basılı tutun. SafeG anında ortamın sesini, 1080p videosunu ve tam koordinatlarınızı kaydeder ve ailenize iletir.</p>
          <div className="mt-7 space-y-3 max-w-[440px]">
            {[
              [<IconVideo s={18} c="#FCA5A5" />, 'Görsel/İşitsel Kanıt', 'Olay anı otomatik ve gizlice kayda alınır'],
              [<IconMapPin s={18} c="#FCA5A5" />, 'Tam Konum', 'Hareket etseniz bile canlı koordinatınız kilitlenir ve paylaşılır'],
              [<IconBolt112 s={18} c="#FCA5A5" />, 'Anında Bildirim', 'Aileniz ve acil kişileriniz saniyeler içinde haberdar olur'],
              [<IconShield s={18} c="#FCA5A5" />, 'Kanıt Arşivi', 'Geçmiş kayıtlarınız — paylaşın veya silin'],
            ].map(([ic, t, d], i) => (
              <div key={i} className="flex items-center gap-3.5 rounded-2xl p-3.5" style={{ background: 'rgba(239,68,68,.07)', border: '1px solid rgba(239,68,68,.18)' }}>
                <span className="flex items-center justify-center rounded-xl shrink-0" style={{ width: 42, height: 42, background: 'rgba(239,68,68,.14)' }}>{ic}</span>
                <div><div className="text-white font-bold text-[15px]">{t}</div><div className="text-slate-400 text-[13px]">{d}</div></div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
      {/* active-state phone, floating */}
      <div className="relative max-w-6xl mx-auto px-5 mt-16 flex justify-center">
        <Reveal delay={2} className="flex flex-col sm:flex-row items-center gap-8 glass glass-edge rounded-[32px] p-6 sm:p-8" style={{ background: 'rgba(13,19,34,.5)', border: '1px solid rgba(239,68,68,.25)' }}>
          <ScaledPhone targetW={236}><SosActiveScreen /></ScaledPhone>
          <div className="max-w-sm">
            <Eyebrow color="#FCA5A5">SOS Aktif</Eyebrow>
            <h3 className="mt-3 text-white font-extrabold text-[26px] tracking-tight">Saniyeler içinde herkes haberdar.</h3>
            <p className="mt-3 text-slate-400 text-[14.5px] leading-relaxed">Geri sayım, canlı ses dalgası, kayıt göstergesi ve "Bildirildi ✓" onayı. Yanlış alarmı tek dokunuşla iptal edin — kimse panik yapmadan.</p>
          </div>
        </Reveal>
      </div>
      {/* dark → light transition out of the cinematic islands */}
      <div className="absolute bottom-0 left-0 right-0 pointer-events-none" style={{ height: 170, background: 'linear-gradient(rgba(255,255,255,0), #FFFFFF)', zIndex: 3 }}></div>
    </section>
  );
};

/* ════ MAHREMİYET MANİFESTOSU ════ */
const Privacy = () => (
  <section id="mahremiyet" data-stop="06" data-stop-label="Mahremiyet" className="relative py-28 sm:py-36 overflow-hidden">
    <Aurora variant="blue" />
    <div className="relative max-w-5xl mx-auto px-5 text-center">
      <Reveal>
        <span className="inline-flex items-center justify-center rounded-3xl mb-7" style={{ width: 78, height: 78, background: 'linear-gradient(150deg,rgba(96,165,250,.2),rgba(56,189,248,.14))', border: '1px solid rgba(125,211,252,.3)' }}>
          <IconLock s={36} c="#7DD3FC" />
        </span>
      </Reveal>
      <Reveal delay={1}>
        <Eyebrow>Mahremiyet Manifestosu</Eyebrow>
      </Reveal>
      <Reveal delay={1}>
        <h2 className="mt-5 font-extrabold text-white tracking-tight mx-auto" style={{ fontSize: 'clamp(34px,5.6vw,68px)', lineHeight: 1.02, maxWidth: 900 }}>
          Konumun senin. <span className="grad-brand">Asla satmayız.</span>
        </h2>
      </Reveal>
      <Reveal delay={2}>
        <p className="mt-6 text-slate-300 text-[18px] leading-relaxed mx-auto" style={{ maxWidth: 620 }}>
          Asla simsara vermeyiz, asla reklamcıya açmayız. Güçlü şifreleme, KVKK uyumlu. Verin senin elinde — istediğinde sil, istediğinde paylaş.
        </p>
      </Reveal>
      <div className="mt-12 grid sm:grid-cols-3 gap-4 max-w-3xl mx-auto">
        {[
          [<IconShieldOk s={24} c="#86EFAC" />, '0₺', 'Konum verisi satışı', 'Hiçbir zaman, hiçbir koşulda'],
          [<IconLock s={24} c="#7DD3FC" />, 'AES-256', 'Güçlü şifreleme', 'Aktarımda ve sunucuda şifreli'],
          [<IconGlobe s={24} c="#60A5FA" />, 'KVKK', 'Tam uyumlu', "Türkiye'de tasarlandı"],
        ].map(([ic, big, t, d], i) => (
          <Reveal key={i} delay={i + 1}>
            <Glass className="p-6 h-full" style={{ border: '1px solid rgba(255,255,255,.08)' }}>
              <div className="flex items-center justify-center mb-3">{ic}</div>
              <div className="text-white font-extrabold text-[28px] tracking-tight grad-brand">{big}</div>
              <div className="text-white font-bold text-[15px] mt-2">{t}</div>
              <div className="text-slate-500 text-[13px] mt-1">{d}</div>
            </Glass>
          </Reveal>
        ))}
      </div>
      <Reveal delay={2}>
        <p className="mt-10 text-slate-500 text-[14px] mx-auto max-w-xl">
          <span className="text-slate-400">Hatırlatma:</span> bazı rakipler kullanıcı konumlarını veri simsarlarına sattı. Biz bunu yapmayacağımıza söz veriyoruz — modelimiz reklam değil, abonelik.
        </p>
      </Reveal>
    </div>
  </section>
);

/* ════ SICAKLIK ════ */
const Warmth = () => (
  <section data-stop="07" data-stop-label="Sıcaklık" className="relative py-24 sm:py-32 overflow-hidden">
    <div className="max-w-6xl mx-auto px-5 grid lg:grid-cols-2 gap-12 items-center">
      <Reveal>
        <Eyebrow color="#FCA5A5">Sıcaklık</Eyebrow>
        <h2 className="mt-5 font-extrabold text-white tracking-tight" style={{ fontSize: 'clamp(32px,4.6vw,56px)', lineHeight: 1 }}>
          Bir uygulamadan fazlası:<br /><span style={{ color: '#FCA5A5' }}>bir bağ.</span>
        </h2>
        <p className="mt-5 text-slate-300 text-[17px] leading-relaxed max-w-[440px]">"Kalp gönder", "Yol Tarifi", ruh hâli avatarı. SafeG izlemekle ilgili değil; uzaktan da olsa yanında olmakla ilgili.</p>
        <div className="mt-7 flex flex-wrap gap-3">
          <HeartButton />
          <span className="inline-flex items-center gap-2 rounded-2xl px-5 h-[52px] font-bold text-white whitespace-nowrap" style={{ background: 'rgba(15,23,42,.04)', border: '1px solid rgba(15,23,42,.1)' }}><IconNav s={18} c="#3678F9" />Yol Tarifi</span>
        </div>
      </Reveal>
      <Reveal delay={1} className="flex justify-center">
        <Glass className="relative w-full max-w-sm p-7 overflow-hidden" style={{ border: '1px solid rgba(239,68,68,.18)' }}>
          <div className="absolute -top-12 -right-8 w-44 h-44 rounded-full" style={{ background: 'radial-gradient(circle,rgba(239,68,68,.3),transparent 70%)', filter: 'blur(12px)' }}></div>
          <div className="relative flex items-center gap-3">
            <div className="rounded-full" style={{ width: 48, height: 48, background: 'linear-gradient(150deg,#7c8aa0,#43617a)', border: '2px solid #EF4444' }}></div>
            <div><div className="text-white font-bold text-[16px]">Mehmet</div><div className="text-slate-400 text-[13px] flex items-center gap-1.5"><span className="w-1.5 h-1.5 rounded-full bg-blue-400"></span>İş yerinde · %100</div></div>
            <span className="ml-auto inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-[12px] font-bold" style={{ background: 'rgba(239,68,68,.16)', color: '#FCA5A5' }}><HeartFill s={13} />59</span>
          </div>
          {/* heart rain */}
          <div className="relative mt-5 rounded-2xl overflow-hidden" style={{ height: 150, background: 'rgba(239,68,68,.05)' }}>
            {Array.from({ length: 9 }).map((_, i) => (
              <span key={i} className="absolute" style={{ left: `${8 + i * 10}%`, top: '-12%', animation: `hr${i % 3} ${2.4 + (i % 4) * 0.5}s ease-in ${i * 0.3}s infinite` }}><HeartFill s={14 + (i % 3) * 7} c={['#EF4444', '#FB7185', '#F87171'][i % 3]} /></span>
            ))}
            <div className="absolute inset-0 flex items-center justify-center"><span className="font-bold text-[14px] mono" style={{ color: 'rgba(225,29,72,.55)' }}>kalp yağmuru 💗</span></div>
          </div>
          <div className="relative mt-4 rounded-xl px-4 py-3 flex items-center gap-2.5" style={{ background: '#EF4444' }}>
            <span style={{ fontSize: 18 }}>💝</span><span className="text-white font-bold text-[14px]" style={{ color: '#fff' }}>Mehmet'e kalp gönderildi</span>
          </div>
          <style>{`@keyframes hr0{to{top:108%;opacity:0}}@keyframes hr1{to{top:108%;transform:translateX(14px);opacity:0}}@keyframes hr2{to{top:108%;transform:translateX(-14px);opacity:0}}`}</style>
        </Glass>
      </Reveal>
    </div>
  </section>
);
const HeartButton = () => {
  const [n, setN] = useState(59);
  const [pop, setPop] = useState(false);
  return (
    <button onClick={() => { setN(v => v + 1); setPop(true); setTimeout(() => setPop(false), 400); }}
      className="relative inline-flex items-center gap-2.5 rounded-2xl px-6 h-[52px] font-bold text-white overflow-hidden whitespace-nowrap"
      style={{ background: 'linear-gradient(100deg,#E11D48,#EF4444)', color: '#fff', boxShadow: '0 12px 30px rgba(239,68,68,.4)', transform: pop ? 'scale(1.05)' : 'scale(1)', transition: 'transform .2s' }}>
      <HeartFill s={20} c="#fff" />Kalp Gönder<span className="mono opacity-80">{n}</span>
      {pop && <span className="absolute left-1/2 top-1/2 -translate-x-1/2" style={{ animation: 'hr0 .6s ease-out forwards' }}><HeartFill s={22} c="#fff" /></span>}
    </button>
  );
};

/* ════ NASIL ÇALIŞIR ════ */
const HowItWorks = () => (
  <section data-stop="08" data-stop-label="Nasıl çalışır" className="relative py-24 sm:py-32 overflow-hidden">
    <div className="max-w-5xl mx-auto px-5">
      <Reveal className="text-center max-w-2xl mx-auto">
        <Eyebrow>Nasıl Çalışır</Eyebrow>
        <h2 className="mt-4 font-extrabold text-white tracking-tight" style={{ fontSize: 'clamp(30px,4.4vw,52px)', lineHeight: 1.05 }}>Üç durakta huzur.</h2>
      </Reveal>
      <div className="mt-14 grid md:grid-cols-3 gap-5">
        {[
          ['01', <IconArrowR s={24} c="#60A5FA" />, 'İndirin', 'App Store veya Google Play\'den ücretsiz indirin, 60 saniyede kurulumu tamamlayın.'],
          ['02', <IconUsers s={24} c="#7DD3FC" />, 'Çevrenizi kurun', 'Ailenizi davet edin, ev/okul/işi "Yerler" olarak ekleyin. Herkes ne paylaştığını kendi kontrol eder.'],
          ['03', <IconShieldOk s={24} c="#86EFAC" />, 'Huzurla yaşayın', 'Doğru anlarda doğru haberler. Spam yok, gözetim yok — sadece içinizi rahatlatan bağ.'],
        ].map(([n, ic, t, d], i) => (
          <Reveal key={i} delay={i + 1}>
            <Glass className="relative p-7 h-full" style={{ border: '1px solid rgba(255,255,255,.08)' }}>
              <div className="absolute top-5 right-6 mono font-extrabold" style={{ fontSize: 44, color: 'rgba(15,23,42,.07)' }}>{n}</div>
              <span className="flex items-center justify-center rounded-2xl" style={{ width: 52, height: 52, background: 'rgba(15,23,42,.04)', border: '1px solid rgba(15,23,42,.08)' }}>{ic}</span>
              <h3 className="mt-5 text-white font-bold text-[22px] tracking-tight">{t}</h3>
              <p className="mt-2.5 text-slate-400 text-[14.5px] leading-relaxed">{d}</p>
            </Glass>
          </Reveal>
        ))}
      </div>
    </div>
  </section>
);

Object.assign(window, { Cinematic, SosSection, Privacy, Warmth, HowItWorks });