import React from 'react';
import { motion } from 'framer-motion';
import { Mic, ArrowRight, ShieldCheck, DollarSign, Clock, Trophy } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { withBasePath } from '@/lib/basePath';
import { appendRegionCurrencyToPath } from '@/lib/regionCurrencyLink';

export default function GBFinalCta() {
  const navigate = useNavigate();
  const signInPath = appendRegionCurrencyToPath('/tools/signin?region=gb&currency=GBP');
  return (
    <>
      <section className="py-20 bg-gradient-to-br from-[#2D0A18] via-[#4A1429] to-[#3A0F20] relative overflow-hidden">
        <div className="absolute inset-0 pointer-events-none">
          <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[300px] rounded-full" style={{ background: 'radial-gradient(ellipse, rgba(212,176,56,0.12) 0%, transparent 70%)' }} />
        </div>

        <div className="relative max-w-3xl mx-auto px-4 sm:px-6 text-center">
          <motion.div initial={{ opacity: 0, y: 24 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5 }}>

            <div className="inline-flex items-center gap-2 bg-red-500/15 border border-red-400/30 rounded-full px-4 py-1.5 mb-6">
              <span className="w-1.5 h-1.5 rounded-full bg-red-400 animate-pulse" />
              <span className="text-red-300 text-xs font-bold tracking-wide uppercase">Every day you wait, someone else takes your opportunity</span>
            </div>

            <h2 className="text-3xl sm:text-4xl font-extrabold text-white mb-4 leading-snug">
              The Job. The Salary. The Life in Britain.<br />
              <span className="text-[#D4B038]">English Is the Only Thing Standing Between You and All of It</span>
            </h2>

            <p className="text-white/75 text-lg mb-3 leading-relaxed">
              4 minutes. That&apos;s all it takes to discover the exact words, sounds and habits costing you money, opportunities and respect — every single day.<br />
              <span className="text-white/90 font-semibold">The most successful people in Britain don&apos;t guess. They know. Now you can too.</span>
            </p>

            <div className="flex flex-wrap justify-center gap-4 mb-8 text-sm">
              {[
                { icon: DollarSign, text: 'Earn more with every improvement' },
                { icon: Clock, text: 'Save years of wasted effort' },
                { icon: Trophy, text: 'Win senior UK roles & international clients' },
              ].map(({ icon: Icon, text }, i) => (
                <div key={i} className="flex items-center gap-2 bg-[#D4AF37]/8 border border-[#D4AF37]/35 rounded-full px-4 py-2 text-white/80 font-medium">
                  <Icon className="w-4 h-4 text-[#D4B038]" />
                  {text}
                </div>
              ))}
            </div>

            <button
              onClick={() => navigate(signInPath)}
              className="group inline-flex items-center gap-3 bg-[#D4B038] hover:bg-[#BFA030] text-[#4A1429] font-extrabold px-10 py-5 rounded-2xl text-xl transition-all shadow-2xl hover:scale-105 mb-4"
            >
              <Mic className="w-6 h-6" />
              Yes — Show Me My Results
              <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
            </button>

            <p className="text-white/40 text-sm mb-5">Starter £4.99/mo · Practice £9.99/mo · Unlimited £19.99/mo · Cancel anytime.</p>

            <div className="flex flex-wrap justify-center gap-4 text-white/40 text-xs font-semibold">
              <span className="flex items-center gap-1"><ShieldCheck className="w-3.5 h-3.5 text-[#D4B038]" /> Prices in GBP</span>
              <span className="flex items-center gap-1"><ShieldCheck className="w-3.5 h-3.5 text-[#D4B038]" /> Cancel anytime</span>
              <span className="flex items-center gap-1"><ShieldCheck className="w-3.5 h-3.5 text-[#D4B038]" /> 7-day money back</span>
              <span className="flex items-center gap-1"><ShieldCheck className="w-3.5 h-3.5 text-[#D4B038]" /> Instant access</span>
            </div>
          </motion.div>
        </div>
      </section>

      <footer className="bg-[#1A0610] py-10 text-center">
        <div className="flex items-center justify-center mb-4">
          <img
            src={withBasePath('/logo/Footer Logo.png')}
            alt="Cambridge Veritas"
            className="h-8 w-auto object-contain opacity-70"
          />
        </div>
        <div className="flex flex-wrap justify-center gap-6 text-white/30 text-xs mb-3">
          <a href="#test-types" className="hover:text-white/60 transition-colors">Choose Test</a>
          <a href="#features" className="hover:text-white/60 transition-colors">Features</a>
          <a href="#pricing" className="hover:text-white/60 transition-colors">Pricing</a>
          <a href="#faq" className="hover:text-white/60 transition-colors">FAQ</a>
        </div>
        <p className="text-white/20 text-xs">© 2026 Cambridge Veritas AI. All rights reserved.</p>
        <p className="text-white/15 text-xs mt-1">Cambridge Veritas is an independent AI coaching platform, not affiliated with Cambridge University Press & Assessment.</p>
      </footer>
    </>
  );
}