/* ═══════════════ SafeG Landing · SECTIONS A (nav, hero, problem, bento) ═══════════════ */

/* ---- brand logo lockup ---- */
const Logo = ({ s = 30 }) => (
  <div className="flex items-center gap-2.5 select-none">
    <span className="relative flex items-center justify-center rounded-xl" style={{ width: s + 8, height: s + 8, background: 'linear-gradient(150deg,#60A5FA,#3678F9 60%,#1D4ED8)', boxShadow: '0 6px 18px rgba(54,120,249,.4)' }}>
      <ShieldFill s={s * 0.62} c="#fff" />
      <span className="absolute rounded-full" style={{ width: 5, height: 5, background: '#7DD3FC', bottom: 6, right: 6, boxShadow: '0 0 8px #7DD3FC' }}></span>
    </span>
    <span className="font-extrabold tracking-tight text-white" style={{ fontSize: s * 0.78 }}>SafeG</span>
  </div>
);

/* ════ NAVBAR ════ */
const Navbar = () => {
  const [solid, setSolid] = useState(false);
  useEffect(() => {
    const on = () => setSolid(window.scrollY > 40);
    on(); window.addEventListener('scroll', on, { passive: true });
    return () => window.removeEventListener('scroll', on);
  }, []);
  const links = [['Özellikler', '#ozellikler'], ['Sinematik', '#sinematik'], ['SOS', '#sos'], ['Mahremiyet', '#mahremiyet'], ['Planlar', '#planlar']];
  return (
    <header className="fixed top-0 left-0 right-0 z-[70] flex justify-center px-4 pt-3.5">
      <nav className={`glass glass-edge w-full max-w-6xl rounded-2xl flex items-center gap-4 px-4 sm:px-5 transition-all duration-300 ${solid ? 'py-2' : 'py-2.5'}`}
        style={{ border: '1px solid rgba(15,23,42,.07)', boxShadow: solid ? '0 12px 34px rgba(15,23,42,.12)' : '0 6px 20px rgba(15,23,42,.05)' }}>
        <a href="#top"><Logo s={26} /></a>
        <div className="hidden lg:flex items-center gap-1 ml-2">
          {links.map(([t, h]) => (
            <a key={h} href={h} className="px-3.5 py-2 rounded-lg text-[14px] font-semibold text-slate-300 hover:text-white hover:bg-white/5 transition-colors">{t}</a>
          ))}
        </div>
        <div className="flex-1"></div>
        <a href="#indir" className="hidden sm:inline-flex items-center gap-2 rounded-xl px-4 h-10 text-[14px] font-bold text-white whitespace-nowrap transition-transform hover:-translate-y-0.5"
          style={{ background: 'linear-gradient(100deg,#1D4ED8,#3678F9)', color: '#fff', boxShadow: '0 8px 22px rgba(54,120,249,.42)' }}>
          Ücretsiz İndir<IconArrowR s={16} c="#fff" />
        </a>
        <a href="#indir" className="sm:hidden inline-flex items-center justify-center rounded-xl w-10 h-10" style={{ background: 'linear-gradient(100deg,#1D4ED8,#3678F9)' }}><IconArrowR s={18} c="#fff" /></a>
      </nav>
    </header>
  );
};

/* ════ HERO ════ */
const Hero = () => (
  <section id="top" data-stop="01" data-stop-label="Başla" className="relative min-h-[100svh] flex items-center pt-28 pb-20 overflow-hidden">
    <Aurora variant="blue" />
    {/* faux-3D dark city behind */}
    <HeroCity />
    <div className="relative z-10 w-full max-w-6xl mx-auto px-5 grid lg:grid-cols-[1.05fr_0.95fr] gap-10 items-center">
      {/* copy */}
      <div>
        <Reveal><PillBadge icon={<IconLock s={14} />} tone="cyan">Konum verinizi asla satmayız</PillBadge></Reveal>
        <Reveal delay={1}>
          <h1 className="mt-5 font-extrabold text-white leading-[1.04] tracking-tight" style={{ fontSize: 'clamp(32px,4.7vw,58px)' }}>
            Sevdiklerinizin hep güvende olduğunu<br />bilmenin <span className="grad-brand">en zarif yolu.</span>
          </h1>
        </Reveal>
        <Reveal delay={2}>
          <p className="mt-6 text-slate-300 max-w-[480px]" style={{ fontSize: 'clamp(16px,1.4vw,19px)', lineHeight: 1.55 }}>
            Gözetim değil, huzur. Casusluk değil, bağ. SafeG; çocuklarınızın ve eşinizin nerede olduğunu anlık görmenizi, güvende olduklarını bilmenizi ve acil durumlarda saniyeler içinde yanlarında olmanızı sağlar. <span className="text-white font-semibold">Üstelik verilerinizi asla kimseye satmadan.</span>
          </p>
        </Reveal>
        <Reveal delay={3}>
          <div className="mt-8 flex flex-wrap gap-3"><AppleBadge /><GoogleBadge /></div>
        </Reveal>
        <Reveal delay={4}>
          <div className="mt-7 flex flex-wrap items-center gap-x-6 gap-y-3 text-[13.5px] text-slate-400">
            <span className="flex items-center gap-2"><IconShieldOk s={17} c="#22C55E" />KVKK uyumlu</span>
            <span className="flex items-center gap-2"><IconLock s={16} c="#7DD3FC" />Güçlü şifreleme</span>
            <span className="flex items-center gap-2"><IconZap s={16} c="#F59E0B" />Pil dostu</span>
            <span className="flex items-center gap-2"><IconGlobe s={16} c="#60A5FA" />Türkiye'de tasarlandı</span>
          </div>
        </Reveal>
      </div>
      {/* hero phone */}
      <Reveal delay={2} className="flex justify-center lg:justify-end">
        <div className="relative" style={{ animation: 'floaty 6s ease-in-out infinite' }}>
          <div className="absolute -inset-8 rounded-full pointer-events-none" style={{ background: 'radial-gradient(circle,rgba(56,189,248,.25),transparent 65%)', filter: 'blur(20px)' }}></div>
          <Tilt max={6}>
            <Phone style={{ filter: 'drop-shadow(0 50px 70px rgba(0,0,0,.6))' }}><MapScreen /></Phone>
          </Tilt>
          {/* floating glass chips */}
          <Glass className="absolute -left-12 top-24 px-3.5 py-2.5 floatS hidden 2xl:flex items-center gap-2.5" style={{ border: '1px solid rgba(34,197,94,.3)' }}>
            <span className="flex items-center justify-center rounded-lg" style={{ width: 30, height: 30, background: 'rgba(34,197,94,.16)' }}><IconMapPin s={16} c="#22C55E" /></span>
            <div className="whitespace-nowrap"><div className="text-white text-[13px] font-bold leading-tight">Evde · Mehmet</div><div className="text-slate-400 text-[11px]">%100 pil · şimdi</div></div>
          </Glass>
          <Glass className="absolute -right-12 top-[44%] px-3.5 py-2.5 float hidden 2xl:flex items-center gap-2.5" style={{ border: '1px solid rgba(56,189,248,.3)' }}>
            <span className="flex items-center justify-center rounded-lg" style={{ width: 30, height: 30, background: 'rgba(56,189,248,.16)' }}><IconRoute s={16} c="#7DD3FC" /></span>
            <div className="whitespace-nowrap"><div className="text-white text-[13px] font-bold leading-tight">Okula vardı</div><div className="text-slate-400 text-[11px]">sadece sana bildirim</div></div>
          </Glass>
        </div>
      </Reveal>
    </div>
    {/* scroll cue */}
    <div className="absolute bottom-6 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 text-slate-500">
      <span className="mono text-[10px] tracking-[0.22em]">NEDEN SAFEG?</span>
      <span className="w-5 h-8 rounded-full border border-slate-600 flex justify-center pt-1.5"><span className="w-1 h-1.5 rounded-full bg-slate-400" style={{ animation: 'floaty 1.6s infinite' }}></span></span>
    </div>
  </section>
);

/* faux-3D city grid for hero bg (light, airy app-map tint) */
const HeroCity = () => (
  <div className="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
    <div className="absolute left-1/2 -translate-x-1/2 lmap" style={{ bottom: '-30%', width: '160%', height: '110%', transform: 'translateX(-50%) perspective(900px) rotateX(62deg)', backgroundSize: '46px 46px,46px 46px', opacity: 0.7, maskImage: 'radial-gradient(ellipse at 50% 35%,#000,transparent 72%)', WebkitMaskImage: 'radial-gradient(ellipse at 50% 35%,#000,transparent 72%)' }}>
      {Array.from({ length: 26 }).map((_, i) => {
        const x = (i % 8) * 13 + 4, y = Math.floor(i / 8) * 22 + 6, h = 18 + (i * 37 % 60);
        return <div key={i} className="absolute" style={{ left: `${x}%`, top: `${y}%`, width: 30, height: h, background: 'linear-gradient(180deg,#e6edfb,#d2def5)', borderRadius: 2, boxShadow: '0 4px 10px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.7)' }}></div>;
      })}
    </div>
  </div>
);

/* ════ MARQUEE strip ════ */
const Marquee = () => {
  const items = ['Şu anda nerede?', 'Maksimum güven, sıfır panik', 'Kalp gönder 💙', 'Yola çıktı', 'Eve vardı', 'Sinematik Rota Raporu', 'Sadece sana bildirim', 'Konumun senin'];
  const row = [...items, ...items];
  return (
    <div className="relative py-5 overflow-hidden border-y" style={{ borderColor: 'rgba(15,23,42,.07)', background: 'linear-gradient(#FFFFFF,#F8FAFC)' }}>
      <div className="flex gap-10 whitespace-nowrap" style={{ animation: 'marq 30s linear infinite', width: 'max-content' }}>
        {row.map((t, i) => (
          <span key={i} className="flex items-center gap-10 font-semibold" style={{ fontSize: 15, color: '#475569' }}>{t}<span className="w-1.5 h-1.5 rounded-full" style={{ background: '#3678F9' }}></span></span>
        ))}
      </div>
      <style>{`@keyframes marq{to{transform:translateX(-50%)}}`}</style>
    </div>
  );
};

/* ════ PROBLEM → SOLUTION ════ */
const Problem = () => (
  <section data-stop="02" data-stop-label="Neden SafeG" className="relative py-24 sm:py-32 overflow-hidden">
    <div className="max-w-6xl mx-auto px-5">
      <Reveal className="text-center max-w-3xl mx-auto">
        <Eyebrow>Neden Farklıyız?</Eyebrow>
        <h2 className="mt-4 font-extrabold text-white tracking-tight" style={{ fontSize: 'clamp(30px,4.4vw,52px)', lineHeight: 1.05 }}>
          Diğer takip uygulamaları yorar.<br /><span className="text-slate-500">SafeG rahatlatır.</span>
        </h2>
        <p className="mt-5 text-slate-400 text-[17px] max-w-xl mx-auto">Sürekli öten bildirimler, biten piller ve satılan kişisel veriler… Eski nesil takip uygulamaları size paranoyak hissettirir. Biz ise içinizi rahatlatmak için buradayız.</p>
      </Reveal>
      <div className="mt-14 grid md:grid-cols-3 gap-5">
        {[
          [<IconLock s={22} c="#7DD3FC" />, 'Veriniz Satılık Değil', 'Diğerleri konumunuzu veri simsarlarına sattı. SafeG, konumunuzu asla satmaz, paylaşmaz. Biz reklamcı değiliz, sadece ailenizin asistanıyız. Nokta.', 'cyan'],
          [<IconBell s={22} c="#60A5FA" />, 'Aileyi Daraltmaz', 'Çocuğunuz okula vardığında tüm ailenin telefonu ötmez. Bildirimi sadece onu merak eden kişiye, yani size göndeririz: "Ayşe okula vardı."', 'blue'],
          [<IconHeart s={22} c="#FCA5A5" />, 'Takip Cihazı Değil, Sevgi Bağı', 'Soğuk bir harita değil; kalp gönderebildiğiniz, tek tıkla yol tarifi alabildiğiniz sıcak bir dijital ev.', 'rose'],
        ].map(([ic, t, d, tone], i) => (
          <Reveal key={i} delay={i + 1}>
            <Tilt max={5} className="h-full">
              <Glass className="h-full p-6" style={{ border: '1px solid rgba(255,255,255,.07)' }}>
                <span className="flex items-center justify-center rounded-2xl" style={{ width: 50, height: 50, background: tone === 'cyan' ? 'rgba(56,189,248,.14)' : tone === 'blue' ? 'rgba(54,120,249,.14)' : 'rgba(239,68,68,.14)' }}>{ic}</span>
                <h3 className="mt-5 text-white font-bold text-[20px] tracking-tight">{t}</h3>
                <p className="mt-2.5 text-slate-400 text-[14.5px] leading-relaxed">{d}</p>
              </Glass>
            </Tilt>
          </Reveal>
        ))}
      </div>
    </div>
  </section>
);

/* ════ BENTO FEATURES ════ */
const Bento = () => (
  <section id="ozellikler" data-stop="03" data-stop-label="Özellikler" className="relative py-24 sm:py-32 overflow-hidden">
    <Aurora variant="cyan" />
    <div className="relative max-w-6xl mx-auto px-5">
      <Reveal className="max-w-2xl">
        <Eyebrow>Yetenekler</Eyebrow>
        <h2 className="mt-4 font-extrabold text-white tracking-tight" style={{ fontSize: 'clamp(30px,4.4vw,52px)', lineHeight: 1.05 }}>İçinizi rahatlatacak her şey,<br />tek bir ekranda.</h2>
      </Reveal>
      <div className="mt-12 grid grid-cols-1 md:grid-cols-6 gap-4 auto-rows-[minmax(0,auto)]">
        {/* live map — wide */}
        <Reveal className="md:col-span-4">
          <BentoCard tone="blue" className="overflow-hidden">
            <div className="flex flex-col sm:flex-row gap-6 h-full">
              <div className="flex-1 min-w-0">
                <BentoHead icon={<IconMapPin s={20} c="#60A5FA" />} tone="blue" k="Canlı Konum & Çevre" />
                <h3 className="mt-3 text-white font-bold text-[24px] tracking-tight">"Şu an nerede?" derdine son.</h3>
                <p className="mt-2.5 text-slate-400 text-[14.5px] leading-relaxed max-w-sm">Sevdiklerinizi anlık olarak haritada görün. Sokak sokak, hız ve şarj durumuyla birlikte.</p>
                <div className="mt-4 flex flex-wrap gap-2">
                  {[['Evde', '#22C55E'], ['İş yerinde', '#3678F9'], ['Yolda', '#F59E0B']].map(([t, c], i) => (
                    <span key={i} className="inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-[12.5px] font-semibold" style={{ background: c + '22', color: c }}><span className="w-1.5 h-1.5 rounded-full" style={{ background: c }}></span>{t}</span>
                  ))}
                </div>
              </div>
              <div className="relative shrink-0 self-center sm:self-stretch flex items-center">
                <ScaledPhone targetW={192}><MapScreen /></ScaledPhone>
              </div>
            </div>
          </BentoCard>
        </Reveal>
        {/* person-targeted alerts — tall */}
        <Reveal delay={1} className="md:col-span-2 md:row-span-2">
          <BentoCard tone="cyan" className="h-full flex flex-col">
            <BentoHead icon={<IconBell s={20} c="#7DD3FC" />} tone="cyan" k="Kişi-Hedefli Bildirim" />
            <h3 className="mt-3 text-white font-bold text-[22px] tracking-tight leading-tight">Spam yok,<br />nokta atışı haber.</h3>
            <p className="mt-2.5 text-slate-400 text-[14px] leading-relaxed">"Eve vardı" bildirimi herkesin değil, sadece sizin telefonunuza düşsün.</p>
            <div className="mt-5 space-y-2.5 flex-1">
              <NotifRow ok name="Okula vardı" sub="14:32 · sadece sana" />
              <NotifRow name="Evden ayrıldı" sub="08:05 · sadece sana" />
              <div className="rounded-xl p-3 flex items-center gap-2.5" style={{ background: 'rgba(239,68,68,.08)', border: '1px dashed rgba(239,68,68,.35)' }}>
                <IconBell s={16} c="#FCA5A5" />
                <span className="text-[12.5px] text-rose-300/80 line-through">Tüm aileye yayın</span>
              </div>
            </div>
          </BentoCard>
        </Reveal>
        {/* places */}
        <Reveal delay={2} className="md:col-span-2">
          <BentoCard tone="green" className="h-full">
            <BentoHead icon={<IconMapPin s={20} c="#86EFAC" />} tone="green" k="Yerler" />
            <h3 className="mt-3 text-white font-bold text-[20px] tracking-tight">Otomatik varış bildirimleri</h3>
            <p className="mt-2 text-slate-400 text-[13.5px] leading-relaxed">Ev, okul veya dershane… Onlar hedefe ulaştığında siz kahvenizi yudumlayın, biz size haber verelim.</p>
            <div className="mt-4 flex gap-2">
              {[['Ev', '#22C55E'], ['Okul', '#3678F9'], ['İş', '#F59E0B']].map(([t, c], i) => (
                <span key={i} className="flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-[12px] font-semibold text-white" style={{ background: 'rgba(15,23,42,.05)' }}><span className="w-2 h-2 rounded-sm" style={{ background: c }}></span>{t}</span>
              ))}
            </div>
          </BentoCard>
        </Reveal>
        {/* trips */}
        <Reveal delay={1} className="md:col-span-2">
          <BentoCard tone="violet" className="h-full">
            <BentoHead icon={<IconRoute s={20} c="#C4B5FD" />} tone="violet" k="Hareketler" />
            <h3 className="mt-3 text-white font-bold text-[20px] tracking-tight">Günün görünmez özeti</h3>
            <div className="mt-3 flex gap-2">
              {[['111', 'km'], ['10', 'durak'], ['9', 'yolc.']].map(([v, l], i) => (
                <div key={i} className="flex-1 rounded-xl py-2 text-center" style={{ background: 'rgba(15,23,42,.05)' }}>
                  <div className="text-white font-extrabold text-[18px]">{v}</div><div className="text-slate-500 text-[11px]">{l}</div>
                </div>
              ))}
            </div>
            <div className="mt-3 inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-[12px] font-bold" style={{ background: 'rgba(245,158,11,.14)', color: '#FCD34D' }}><IconGauge s={15} c="#FCD34D" />YÜKSEK HIZ · 120 km/sa</div>
          </BentoCard>
        </Reveal>
        {/* warmth */}
        <Reveal delay={2} className="md:col-span-2">
          <BentoCard tone="rose" className="h-full">
            <BentoHead icon={<IconHeart s={20} c="#FCA5A5" />} tone="rose" k="Sıcaklık" />
            <h3 className="mt-3 text-white font-bold text-[20px] tracking-tight">Kalp gönder</h3>
            <p className="mt-2 text-slate-400 text-[13.5px] leading-relaxed">Takip değil, bağ. Bir dokunuşla sevgi yolla.</p>
            <div className="mt-3 flex items-center gap-1.5">
              {[0, 1, 2, 3, 4].map(i => <HeartFill key={i} s={18 + (i === 2 ? 6 : 0)} c={i < 3 ? '#EF4444' : '#3a2230'} />)}
              <span className="ml-1 text-rose-300 font-bold text-[14px]">59</span>
            </div>
          </BentoCard>
        </Reveal>
      </div>
    </div>
  </section>
);

const BentoCard = ({ children, tone = 'blue', className = '', style }) => {
  const glow = { blue: 'rgba(54,120,249,.5)', cyan: 'rgba(56,189,248,.5)', green: 'rgba(34,197,94,.45)', violet: 'rgba(124,92,252,.45)', rose: 'rgba(239,68,68,.45)' }[tone];
  return (
    <Tilt max={4} className="h-full">
      <div className={`glass glass-edge rounded-3xl p-6 h-full relative overflow-hidden ${className}`} style={{ border: '1px solid rgba(255,255,255,.08)', ...style }}>
        <div className="absolute -top-16 -right-10 w-44 h-44 rounded-full pointer-events-none" style={{ background: `radial-gradient(circle,${glow},transparent 70%)`, filter: 'blur(10px)', opacity: 0.5 }}></div>
        <div className="relative h-full">{children}</div>
      </div>
    </Tilt>
  );
};
const BentoHead = ({ icon, k, tone }) => {
  const bg = { blue: 'rgba(54,120,249,.14)', cyan: 'rgba(56,189,248,.14)', green: 'rgba(34,197,94,.14)', violet: 'rgba(124,92,252,.16)', rose: 'rgba(239,68,68,.14)' }[tone];
  return (
    <div className="flex items-center gap-2.5">
      <span className="flex items-center justify-center rounded-xl" style={{ width: 40, height: 40, background: bg }}>{icon}</span>
      <span className="mono text-[11px] font-semibold tracking-[0.14em] uppercase text-slate-400">{k}</span>
    </div>
  );
};
const NotifRow = ({ ok, name, sub }) => (
  <div className="rounded-xl p-3 flex items-center gap-2.5" style={{ background: 'rgba(15,23,42,.04)' }}>
    <span className="flex items-center justify-center rounded-lg shrink-0" style={{ width: 30, height: 30, background: ok ? 'rgba(34,197,94,.16)' : 'rgba(54,120,249,.16)' }}>
      {ok ? <IconCheck s={16} c="#86EFAC" sw={2.2} /> : <IconNav s={15} c="#60A5FA" />}
    </span>
    <div className="min-w-0"><div className="text-white text-[13px] font-semibold truncate">{name}</div><div className="text-slate-500 text-[11px]">{sub}</div></div>
  </div>
);

Object.assign(window, { Logo, Navbar, Hero, Marquee, Problem, Bento });