'use client';

import { motion } from 'framer-motion';
import { Zap } from 'lucide-react';
import { config } from '@/lib/config';
import { getRuntimeClientConfig } from '@/lib/runtime-client-config';

type CtaSectionProps = {
  onOpenLogin?: () => void;
  isAuthenticated?: boolean;
};

export default function CtaSection({ onOpenLogin, isAuthenticated = false }: CtaSectionProps) {
  const runtimeConfig = getRuntimeClientConfig();
  const projectName = runtimeConfig.projectName || config.projectName;

  return (
    <section className="px-6 lg:px-12 w-full pt-20 pb-16 border-t border-white/5 relative z-10">
      <div className="absolute top-0 inset-x-0 mx-auto w-1/2 h-px bg-gradient-to-r from-transparent via-violet-500/50 to-transparent" />

      <div className="max-w-5xl mx-auto flex flex-col items-center text-center relative z-10">
        <div className="absolute top-[30%] left-1/2 -translate-x-1/2 w-full h-full max-w-3xl bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-violet-600/20 via-transparent to-transparent pointer-events-none blur-3xl shadow-2xl" />

        <motion.h2
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5 }}
          className="text-5xl md:text-7xl font-bold tracking-tight mb-8 text-white px-4 relative z-10"
        >
          Меньше слов.{' '}
          <span className="text-transparent bg-clip-text bg-gradient-to-r from-violet-400 to-[#2AABEE]">
            Больше кликов.
          </span>
        </motion.h2>

        <motion.p
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5, delay: 0.1 }}
          className="text-gray-400 md:text-xl max-w-2xl mx-auto mb-12 relative z-10 font-medium"
        >
          Перестаньте использовать сложные сервисы. {projectName} это все, что нужно для быстрого старта, аналитики и
          роста вашей аудитории.
        </motion.p>

        <div className="relative z-10 flex flex-col sm:flex-row gap-6 items-center w-full sm:w-auto">
          <motion.button
            type="button"
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            onClick={onOpenLogin}
            className="w-full sm:w-auto px-12 py-5 bg-gradient-to-r from-fuchsia-500 to-violet-600 hover:from-fuchsia-400 hover:to-violet-500 text-white font-bold rounded-full text-lg shadow-[0_0_40px_rgba(192,38,211,0.4)] flex items-center justify-center transition-all group"
          >
            <Zap className="w-5 h-5 mr-2 group-hover:scale-110 transition-transform" />
            {isAuthenticated ? 'Перейти в панель' : 'Подключить бесплатно'}
          </motion.button>
        </div>
      </div>
    </section>
  );
}