import { motion } from "motion/react";
import { ArrowRight } from "lucide-react";

export function Hero() {
  return (
    <section className="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden bg-[#FBFBFD]">
      <div className="absolute inset-0 z-0 opacity-10">
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[400px] bg-blue-500 rounded-full blur-[120px]" />
      </div>
      
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
          className="max-w-4xl mx-auto"
        >
          <h1 className="text-5xl md:text-7xl font-bold tracking-tight text-gray-900 mb-6 leading-tight">
            Новый стандарт <br/>
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600">
              спортивных возможностей
            </span>
          </h1>
          <p className="mt-4 text-xl md:text-2xl text-gray-500 mb-10 max-w-2xl mx-auto font-light leading-relaxed">
            Комплексные решения для территориальных и первичных организаций. Открываем максимум преференций для членов профсоюза.
          </p>
          <div className="flex flex-col sm:flex-row justify-center gap-4">
            <a href="#preferences" className="inline-flex items-center justify-center px-8 py-4 text-base font-medium rounded-full text-white bg-blue-600 hover:bg-blue-700 transition-all shadow-lg hover:shadow-xl hover:-translate-y-0.5">
              Узнать о преференциях
            </a>
            <a href="#app" className="inline-flex items-center justify-center px-8 py-4 text-base font-medium rounded-full text-gray-900 bg-white border border-gray-200 hover:bg-gray-50 transition-all hover:-translate-y-0.5">
              О приложении
              <ArrowRight className="ml-2 w-4 h-4" />
            </a>
          </div>
        </motion.div>
      </div>
    </section>
  );
}
