import { motion } from "motion/react";
import { Smartphone, Zap, Bell, Calendar } from "lucide-react";

export function AppTeaser() {
  return (
    <section id="app" className="py-24 bg-gray-900 overflow-hidden relative">
      <div className="absolute inset-0 z-0">
        <div className="absolute inset-0 bg-blue-900/20 mix-blend-multiply" />
        <div className="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-blue-600/10 to-transparent" />
      </div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
          <motion.div
            initial={{ opacity: 0, x: -30 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            className="max-w-xl"
          >
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-500/10 border border-blue-500/20 text-blue-400 text-sm font-medium mb-6">
              <Zap className="w-4 h-4" />
              В разработке
            </div>
            <h2 className="text-4xl md:text-5xl font-bold text-white mb-6 leading-tight tracking-tight">
              Спорт и льготы <br/>
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-indigo-400">
                в вашем кармане
              </span>
            </h2>
            <p className="text-xl text-gray-400 mb-8 font-light leading-relaxed">
              Мы готовим к запуску официальное мобильное приложение <b>«Профспорттур РФ»</b>. Управление преференциями, запись на мероприятия и электронный профсоюзный билет станут доступны в один клик.
            </p>
            
            <div className="bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-2xl p-6 mb-8">
              <h3 className="text-lg font-medium text-white mb-2">Ожидаемый релиз</h3>
              <div className="flex items-end gap-3">
                <span className="text-4xl font-bold text-blue-400">2–3</span>
                <span className="text-gray-400 text-lg mb-1">месяца</span>
              </div>
            </div>

            <div className="space-y-4">
              {[
                { icon: <Smartphone className="w-5 h-5 text-gray-400" />, text: "Единая цифровая карта члена профсоюза" },
                { icon: <Bell className="w-5 h-5 text-gray-400" />, text: "Push-уведомления о новых скидках и акциях" },
                { icon: <Calendar className="w-5 h-5 text-gray-400" />, text: "Удобный календарь спортивных событий" }
              ].map((item, i) => (
                <div key={i} className="flex items-center gap-3 text-gray-300">
                  <div className="bg-gray-800 p-2 rounded-lg">
                    {item.icon}
                  </div>
                  <span>{item.text}</span>
                </div>
              ))}
            </div>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, y: 50 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
            className="relative"
          >
            {/* Abstract phone representation */}
            <div className="relative mx-auto w-full max-w-[320px] aspect-[1/2] rounded-[3rem] border-[12px] border-gray-800 bg-black shadow-2xl overflow-hidden">
              <div className="absolute top-0 inset-x-0 h-6 bg-gray-800 rounded-b-3xl w-1/2 mx-auto" /> {/* Notch */}
              
              <img 
                src="https://images.unsplash.com/photo-1609174661269-eb324555db68?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtb2Rlcm4lMjBzbWFydHBob25lJTIwYmxhbmslMjBzY3JlZW4lMjBnbG93aW5nJTIwZGFya3xlbnwxfHx8fDE3NzMzMDg4Mjl8MA&ixlib=rb-4.1.0&q=80&w=1080"
                alt="App Interface Mockup"
                className="w-full h-full object-cover opacity-60 mix-blend-luminosity"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-blue-900/80 to-transparent" />
              
              <div className="absolute bottom-0 inset-x-0 p-8 flex flex-col items-center justify-end">
                <div className="w-16 h-16 bg-blue-600 rounded-2xl flex items-center justify-center mb-4 shadow-[0_0_30px_rgba(37,99,235,0.5)]">
                  <Zap className="w-8 h-8 text-white" />
                </div>
                <div className="text-white font-medium text-lg">Скоро в App Store</div>
                <div className="text-gray-400 text-sm">и Google Play</div>
              </div>
            </div>
            
            {/* Glow effects */}
            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-3/4 h-3/4 bg-blue-500/30 blur-[100px] -z-10 rounded-full" />
          </motion.div>
        </div>
      </div>
    </section>
  );
}
