import { useNavigate } from 'react-router-dom';
import { motion } from 'framer-motion';
import {
  Sparkles, Bot, Image, MessageSquare, Shield, Zap, ArrowRight,
  Globe, CreditCard, Brain, Palette,
} from 'lucide-react';

const features = [
  { icon: Bot, title: 'AI Karakter Motoru', desc: 'Benzersiz kişilikler oluşturun. DNA sistemiyle tutarlı yüz, vücut ve stil.' },
  { icon: Image, title: 'Görsel Üretim', desc: 'nano-banana-2 ile fotorealistik görseller. Policy-safe otomatik filtre.' },
  { icon: MessageSquare, title: 'Akıllı Sohbet', desc: 'OpenRouter ile doğal konuşmalar. Karakter bazlı kişilik ayarları.' },
  { icon: CreditCard, title: 'Telegram Stars', desc: 'İçerik satışı, VIP kanallar, otomatik ödeme yönetimi.' },
  { icon: Shield, title: 'Güvenli İçerik', desc: 'Google policy uyumlu prompt sistemi. Otomatik sanitizasyon.' },
  { icon: Zap, title: 'Otomasyon', desc: 'Zamanlanmış paylaşımlar, otomatik yanıtlar, kuyruk yönetimi.' },
];

const stats = [
  { value: '7+', label: 'Referans Açı' },
  { value: '∞', label: 'Görsel Üretim' },
  { value: '24/7', label: 'Otomasyon' },
  { value: '5★', label: 'Stars Gelir' },
];

export default function Landing() {
  const navigate = useNavigate();

  return (
    <div className="min-h-screen bg-[#050508] text-white overflow-hidden">
      {/* Ambient background */}
      <div className="fixed inset-0 pointer-events-none">
        <div className="absolute top-[-20%] left-[-10%] w-[600px] h-[600px] rounded-full bg-indigo-600/[0.07] blur-[120px]" />
        <div className="absolute bottom-[-20%] right-[-10%] w-[500px] h-[500px] rounded-full bg-violet-600/[0.05] blur-[120px]" />
      </div>

      {/* Nav */}
      <nav className="relative z-10 flex items-center justify-between px-8 py-5 max-w-7xl mx-auto">
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-violet-600 flex items-center justify-center shadow-lg shadow-indigo-500/20">
            <Sparkles className="w-5 h-5 text-white" />
          </div>
          <div>
            <span className="text-lg font-bold tracking-tight">AI Content Creator</span>
            <span className="ml-2 text-[10px] font-medium text-slate-500 uppercase tracking-widest">by Baever</span>
          </div>
        </div>
        <motion.button
          whileHover={{ scale: 1.02 }}
          whileTap={{ scale: 0.98 }}
          onClick={() => navigate('/dashboard')}
          className="px-5 py-2.5 rounded-xl bg-white/[0.08] border border-white/[0.1] text-sm font-medium text-slate-300 hover:text-white hover:bg-white/[0.12] transition-all cursor-pointer"
        >
          Panele Git
        </motion.button>
      </nav>

      {/* Hero */}
      <section className="relative z-10 max-w-7xl mx-auto px-8 pt-20 pb-16">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          className="text-center max-w-3xl mx-auto"
        >
          <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-indigo-500/[0.1] border border-indigo-500/[0.2] mb-8">
            <Sparkles className="w-3.5 h-3.5 text-indigo-400" />
            <span className="text-xs font-medium text-indigo-300">Baever Teknoloji</span>
          </div>

          <h1 className="text-5xl sm:text-6xl font-bold tracking-tight leading-[1.1] mb-6">
            <span className="text-white">AI ile </span>
            <span className="bg-gradient-to-r from-indigo-400 via-violet-400 to-purple-400 bg-clip-text text-transparent">
              İçerik Üret
            </span>
            <br />
            <span className="text-white">Telegram'da </span>
            <span className="bg-gradient-to-r from-violet-400 to-pink-400 bg-clip-text text-transparent">
              Satış Yap
            </span>
          </h1>

          <p className="text-lg text-slate-400 max-w-xl mx-auto mb-10 leading-relaxed">
            Yapay zekâ destekli karakter oluşturun, fotorealistik görseller üretin,
            Telegram üzerinden içerik satın. Tamamen otomatik.
          </p>

          <div className="flex items-center justify-center gap-4">
            <motion.button
              whileHover={{ scale: 1.03 }}
              whileTap={{ scale: 0.97 }}
              onClick={() => navigate('/dashboard')}
              className="group flex items-center gap-2 px-7 py-3.5 rounded-xl bg-gradient-to-r from-indigo-600 to-violet-600 text-sm font-semibold shadow-lg shadow-indigo-500/25 hover:shadow-indigo-500/40 transition-all cursor-pointer"
            >
              Başla
              <ArrowRight className="w-4 h-4 group-hover:translate-x-0.5 transition-transform" />
            </motion.button>
            <motion.button
              whileHover={{ scale: 1.03 }}
              whileTap={{ scale: 0.97 }}
              onClick={() => {
                const el = document.getElementById('features');
                el?.scrollIntoView({ behavior: 'smooth' });
              }}
              className="px-7 py-3.5 rounded-xl border border-white/[0.1] text-sm font-medium text-slate-400 hover:text-white hover:border-white/[0.2] transition-all cursor-pointer"
            >
              Özellikleri Gör
            </motion.button>
          </div>
        </motion.div>

        {/* Stats */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.4, duration: 0.6 }}
          className="flex items-center justify-center gap-16 mt-20"
        >
          {stats.map((s) => (
            <div key={s.label} className="text-center">
              <div className="text-3xl font-bold text-white">{s.value}</div>
              <div className="text-xs text-slate-500 mt-1">{s.label}</div>
            </div>
          ))}
        </motion.div>
      </section>

      {/* Features */}
      <section id="features" className="relative z-10 max-w-7xl mx-auto px-8 py-20">
        <div className="text-center mb-14">
          <h2 className="text-3xl font-bold mb-3">Her Şey Tek Panelde</h2>
          <p className="text-slate-500 text-sm">Karakter oluşturmadan gelir yönetimine kadar.</p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {features.map((f, i) => (
            <motion.div
              key={f.title}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: i * 0.1 }}
              className="group p-6 rounded-2xl bg-white/[0.02] border border-white/[0.06] hover:border-white/[0.12] hover:bg-white/[0.04] transition-all"
            >
              <div className="w-11 h-11 rounded-xl bg-indigo-500/[0.1] flex items-center justify-center mb-4 group-hover:bg-indigo-500/[0.15] transition-colors">
                <f.icon className="w-5 h-5 text-indigo-400" />
              </div>
              <h3 className="text-sm font-semibold text-white mb-2">{f.title}</h3>
              <p className="text-xs text-slate-500 leading-relaxed">{f.desc}</p>
            </motion.div>
          ))}
        </div>
      </section>

      {/* How it works */}
      <section className="relative z-10 max-w-7xl mx-auto px-8 py-20">
        <div className="text-center mb-14">
          <h2 className="text-3xl font-bold mb-3">Nasıl Çalışır?</h2>
          <p className="text-slate-500 text-sm">3 adımda hazır.</p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {[
            { step: '01', icon: Palette, title: 'Karakter Oluştur', desc: 'DNA sistemiyle fiziksel özellikler, kişilik ve konuşma tarzı belirleyin.' },
            { step: '02', icon: Brain, title: 'API Bağla', desc: 'KIE ve OpenRouter API anahtarlarınızı girin. Görsel ve sohbet motoru hazır.' },
            { step: '03', icon: Globe, title: 'Yayınla', desc: "Telegram'a bağlayın. Otomatik içerik üretimi ve satış başlasın." },
          ].map((item, i) => (
            <motion.div
              key={item.step}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: i * 0.15 }}
              className="relative p-6 rounded-2xl bg-white/[0.02] border border-white/[0.06]"
            >
              <span className="text-5xl font-black text-white/[0.04] absolute top-4 right-5">{item.step}</span>
              <div className="w-11 h-11 rounded-xl bg-violet-500/[0.1] flex items-center justify-center mb-4">
                <item.icon className="w-5 h-5 text-violet-400" />
              </div>
              <h3 className="text-sm font-semibold text-white mb-2">{item.title}</h3>
              <p className="text-xs text-slate-500 leading-relaxed">{item.desc}</p>
            </motion.div>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section className="relative z-10 max-w-7xl mx-auto px-8 py-20">
        <motion.div
          initial={{ opacity: 0, scale: 0.98 }}
          whileInView={{ opacity: 1, scale: 1 }}
          viewport={{ once: true }}
          className="text-center p-12 rounded-3xl bg-gradient-to-br from-indigo-500/[0.08] to-violet-500/[0.08] border border-indigo-500/[0.15]"
        >
          <h2 className="text-3xl font-bold mb-3">Hemen Başlayın</h2>
          <p className="text-slate-400 text-sm mb-8 max-w-md mx-auto">
            API anahtarlarınızı girin, karakterinizi oluşturun ve dakikalar içinde
            Telegram'da içerik satmaya başlayın.
          </p>
          <motion.button
            whileHover={{ scale: 1.03 }}
            whileTap={{ scale: 0.97 }}
            onClick={() => navigate('/dashboard')}
            className="group inline-flex items-center gap-2 px-8 py-3.5 rounded-xl bg-gradient-to-r from-indigo-600 to-violet-600 text-sm font-semibold shadow-lg shadow-indigo-500/25 cursor-pointer"
          >
            Paneli Aç
            <ArrowRight className="w-4 h-4 group-hover:translate-x-0.5 transition-transform" />
          </motion.button>
        </motion.div>
      </section>

      {/* Footer */}
      <footer className="relative z-10 border-t border-white/[0.06] py-8 mt-10">
        <div className="max-w-7xl mx-auto px-8 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Sparkles className="w-4 h-4 text-indigo-400" />
            <span className="text-sm font-semibold text-slate-400">AI Content Creator</span>
            <span className="text-[10px] text-slate-600 ml-1">by Baever</span>
          </div>
          <span className="text-xs text-slate-600">© 2026 Baever. Tüm hakları saklıdır.</span>
        </div>
      </footer>
    </div>
  );
}
