// apps/verify/src/pages/Landing.jsx
import { Send, Linkedin, Youtube } from 'lucide-react';
import React, { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { useNavigate } from 'react-router-dom';
import { 
  ArrowRight, 
  CheckCircle, 
  Zap, 
  Shield, 
  Users, 
  Clock, 
  Award,
  Code,
  BarChart3,
  Star,
  Menu,
  X,
  Twitter,
  Loader2,
  User,
  LogIn,
  DollarSign,
  Target,
  Sparkles,
  Globe,
  Server,
  Cpu
} from 'lucide-react';

// Import logo
import logo from '../../../../services/api/src/components/Logo.png';

export function Landing() {
  const navigate = useNavigate();
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [showAudit, setShowAudit] = useState(false);
  const [auditSubmitted, setAuditSubmitted] = useState(false);
  const [isSubmittingAudit, setIsSubmittingAudit] = useState(false);
  const [auditResult, setAuditResult] = useState(null);
  const [scrolled, setScrolled] = useState(false);

  const [auditForm, setAuditForm] = useState({
    companyName: '',
    companySize: '10',
    avgDaysToHire: '45',
    email: '',
  });

  // ─── Scroll Effect ──────────────────────────────────────────────

  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 20);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // ─── Features Data ──────────────────────────────────────────────

  const features = [
    {
      icon: <Code className="w-6 h-6" />,
      title: 'Live Code Assessment',
      description: 'Real-time coding environment to evaluate technical skills with automated test suites.',
      bgClass: 'bg-blue-50',
      textClass: 'text-blue-600',
    },
    {
      icon: <Shield className="w-6 h-6" />,
      title: 'Proctoring & Anti-Cheat',
      description: 'Advanced browser lock, screen proctoring, and automated plagiarism detection.',
      bgClass: 'bg-emerald-50',
      textClass: 'text-emerald-600',
    },
    {
      icon: <Award className="w-6 h-6" />,
      title: 'Verification Badge',
      description: 'Verifiable candidate certificates for top scoring candidates.',
      bgClass: 'bg-purple-50',
      textClass: 'text-purple-600',
    },
    {
      icon: <Users className="w-6 h-6" />,
      title: 'Pre-Vetted Talent Pool',
      description: 'Access top candidates screened through rigorous technical evaluations.',
      bgClass: 'bg-amber-50',
      textClass: 'text-amber-600',
    },
    {
      icon: <Clock className="w-6 h-6" />,
      title: 'Accelerated Screening',
      description: 'Reduce average time-to-hire from 60 days down to under 18 days.',
      bgClass: 'bg-rose-50',
      textClass: 'text-rose-600',
    },
    {
      icon: <BarChart3 className="w-6 h-6" />,
      title: 'Data-Driven Insights',
      description: 'Objective scorecards, comparative rank metrics, and team performance analytics.',
      bgClass: 'bg-indigo-50',
      textClass: 'text-indigo-600',
    }
  ];

  // ─── Pricing Data ────────────────────────────────────────────────

  const pricingTiers = [
    {
      name: 'Starter',
      price: '$1,500',
      period: '/month',
      description: 'Perfect for growing engineering teams',
      features: [
        '50 applicant evaluations/mo',
        'Standard test library',
        'Email & chat support',
        'Standard candidate reporting',
        'Basic proctoring & plagiarism checks'
      ],
      cta: 'Get Started',
      popular: false,
    },
    {
      name: 'Growth',
      price: '$3,000',
      period: '/month',
      description: 'Ideal for scaling enterprise teams',
      features: [
        '150 applicant evaluations/mo',
        'Advanced custom test creation',
        'Priority 24/7 support',
        'Custom candidate branding',
        'ATS & Webhook API access',
        'Advanced anti-cheat AI'
      ],
      cta: 'Start Free Trial',
      popular: true,
    },
    {
      name: 'Enterprise',
      price: 'Custom',
      period: '',
      description: 'Tailored solutions for high-volume hiring',
      features: [
        'Unlimited candidate evaluations',
        'Dedicated technical recruiter & CSM',
        'Custom SLA & uptime guarantee',
        'On-premise / Single-tenant deployment',
        'Custom ATS workflow integrations'
      ],
      cta: 'Contact Sales',
      popular: false,
    }
  ];

  // ─── Testimonials ────────────────────────────────────────────────

  const testimonials = [
    {
      name: 'Sarah Johnson',
      role: 'CTO, TechCorp',
      content: 'SkillNexus reduced our engineering hiring cycle by over 60% while dramatically improving candidate pass rates in team interviews.',
      rating: 5,
      avatar: 'https://ui-avatars.com/api/?name=Sarah+Johnson&background=2563EB&color=fff'
    },
    {
      name: 'Michael Okonkwo',
      role: 'Head of Engineering, FintechX',
      content: 'The skill verification badge gives us absolute confidence in technical candidates. We have brought on 20+ senior engineers effortlessly.',
      rating: 5,
      avatar: 'https://ui-avatars.com/api/?name=Michael+Okonkwo&background=10B981&color=fff'
    },
    {
      name: 'Dr. Amina Hassan',
      role: 'HR Director, Global Solutions',
      content: 'SkillNexus transformed our recruitment funnel. We now hire using verified competency data rather than guessing from resumes.',
      rating: 5,
      avatar: 'https://ui-avatars.com/api/?name=Amina+Hassan&background=8B5CF6&color=fff'
    }
  ];

  const stats = [
    { label: 'Companies Trust Us', value: '500+' },
    { label: 'Candidates Verified', value: '10,000+' },
    { label: 'Hiring Time Saved', value: '60%' },
    { label: 'Candidate Match Rate', value: '94%' }
  ];

  const navItems = [
    { label: 'Features', href: '#features' },
    { label: 'Pricing', href: '#pricing' },
    { label: 'About', href: '/about' },
    { label: 'Blog', href: '/blog' },
    { label: 'API Docs', href: '/api-docs' },
    { label: 'Contact', href: '/contact' }
  ];

  // ─── Navigation Handlers ─────────────────────────────────────────

  const scrollToSection = (id) => {
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
    }
  };

  const handleNavClick = (href) => {
    if (href.startsWith('#')) {
      scrollToSection(href.substring(1));
    } else {
      navigate(href);
    }
    setIsMenuOpen(false);
  };

  const handleGetStarted = () => {
    setShowAudit(true);
    setAuditSubmitted(false);
    setAuditResult(null);
  };

  const handlePricingClick = () => {
    const token = localStorage.getItem('skillnexus_token');
    if (token) {
      navigate('/dashboard');
    } else {
      setShowAudit(true);
    }
  };

  // ─── Audit Handler ──────────────────────────────────────────────

  const handleAuditSubmit = (e) => {
    e.preventDefault();
    setIsSubmittingAudit(true);
    
    setTimeout(() => {
      const daysToHire = parseInt(auditForm.avgDaysToHire) || 45;
      const hiresPerYear = parseInt(auditForm.companySize) || 10;
      
      const timeSavedPercent = ((daysToHire - 17) / daysToHire * 100).toFixed(1);
      const costPerHire = 4500;
      const annualCost = costPerHire * hiresPerYear;
      const savingsWithSkillNexus = annualCost * 0.65;
      const misHireReduction = 88;
      
      const result = {
        timeSavedPercent,
        daysReduced: daysToHire - 17,
        annualCost,
        savingsWithSkillNexus: Math.round(savingsWithSkillNexus),
        misHireReduction,
        newDaysToHire: 17,
        hiresPerYear,
        recommendations: [
          'Replace preliminary resume screening with automated technical assessments.',
          'Implement SkillNexus proctored code challenges to drop interview stages from 4 to 2.',
          'Leverage pre-verified talent badges for immediate senior engineering placements.'
        ]
      };
      
      setAuditResult(result);
      setIsSubmittingAudit(false);
      setAuditSubmitted(true);
    }, 800);
  };

  // ─── Render ──────────────────────────────────────────────────────

  return (
    <div className="min-h-screen bg-white text-gray-800">
      {/* ─── Navigation ────────────────────────────────────────── */}
      
      <nav className={`fixed top-0 w-full z-50 transition-all duration-300 ${
        scrolled 
          ? 'bg-white/95 backdrop-blur-md border-b border-gray-100 shadow-lg' 
          : 'bg-white/80 backdrop-blur-sm border-b border-gray-100/50'
      }`}>
        <div className="container mx-auto px-4">
          <div className="flex items-center justify-between h-16">
            
            <div 
              className="flex items-center gap-2 cursor-pointer"
              onClick={() => navigate('/')}
            >
              <img 
                src={logo} 
                alt="SkillNexus" 
                className="w-9 h-9 rounded-xl shadow-md shadow-blue-500/20"
              />
              <span className="text-xl font-extrabold text-gray-900 tracking-tight">SkillNexus</span>
            </div>

            <div className="hidden md:flex items-center gap-8">
              {navItems.map((item) => (
                <button
                  key={item.label}
                  onClick={() => handleNavClick(item.href)}
                  className="text-sm font-medium text-gray-600 hover:text-blue-600 transition-colors"
                >
                  {item.label}
                </button>
              ))}
            </div>

            <div className="hidden md:flex items-center gap-3">
              <button 
                onClick={() => navigate('/login')}
                className="px-4 py-2 text-sm font-semibold text-gray-700 hover:text-blue-600 transition-colors flex items-center gap-2"
              >
                <LogIn className="w-4 h-4" />
                Sign In
              </button>
              <button 
                onClick={() => navigate('/register')}
                className="px-4 py-2 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white rounded-xl transition-all shadow-md shadow-blue-500/20 text-sm font-semibold"
              >
                Get Started
              </button>
            </div>

            <button 
              onClick={() => setIsMenuOpen(!isMenuOpen)}
              className="md:hidden p-2 rounded-lg hover:bg-gray-100 text-gray-600"
            >
              {isMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
            </button>
          </div>
        </div>

        {isMenuOpen && (
          <div className="md:hidden bg-white/95 backdrop-blur-md border-t border-gray-100 px-4 pt-4 pb-6 space-y-3 shadow-lg">
            {navItems.map((item) => (
              <button
                key={item.label}
                onClick={() => handleNavClick(item.href)}
                className="block w-full text-left py-2 text-base font-medium text-gray-700 hover:text-blue-600"
              >
                {item.label}
              </button>
            ))}
            <div className="pt-2 border-t border-gray-100 space-y-2">
              <button 
                onClick={() => {
                  setIsMenuOpen(false);
                  navigate('/login');
                }}
                className="block w-full text-left py-2 text-base font-medium text-gray-700 hover:text-blue-600 flex items-center gap-2"
              >
                <LogIn className="w-4 h-4" />
                Sign In
              </button>
              <button 
                onClick={() => {
                  setIsMenuOpen(false);
                  navigate('/register');
                }}
                className="w-full py-3 bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-semibold rounded-xl text-center"
              >
                Get Started Free
              </button>
            </div>
          </div>
        )}
      </nav>

      {/* ─── Hero Section ────────────────────────────────────────── */}
      
      <section className="relative pt-32 pb-20 overflow-hidden">
        {/* Background Pattern */}
        <div className="absolute inset-0 bg-gradient-to-br from-blue-50/80 via-white to-indigo-50/80"></div>
        <div className="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg width=%2760%27 height=%2760%27 viewBox=%270 0 60 60%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cg fill=%27none%27 fill-rule=%27evenodd%27%3E%3Cg fill=%27%234f46e5%27 fill-opacity=%270.05%27%3E%3Cpath d=%27M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z%27/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')] opacity-50"></div>
        
        {/* Animated Gradient Orbs */}
        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-400/20 rounded-full blur-3xl animate-pulse"></div>
        <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-indigo-400/20 rounded-full blur-3xl animate-pulse delay-1000"></div>

        <div className="container mx-auto px-4 relative z-10">
          <div className="max-w-4xl mx-auto text-center">
            
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5 }}
              className="inline-flex items-center gap-2 px-3.5 py-1.5 bg-blue-100/80 text-blue-800 rounded-full text-xs font-semibold uppercase tracking-wider mb-6 backdrop-blur-sm"
            >
              <Sparkles className="w-3.5 h-3.5 text-blue-600" />
              <span>Enterprise Skill Verification Ecosystem</span>
            </motion.div>

            <motion.h1
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.1 }}
              className="text-4xl md:text-6xl font-black text-gray-900 mb-6 leading-tight tracking-tight"
            >
              Hire Smarter,{' '}
              <span className="bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">
                Verify Competency
              </span>
              <br />
              With Total Confidence
            </motion.h1>

            <motion.p
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.2 }}
              className="text-lg md:text-xl text-gray-600 mb-8 max-w-2xl mx-auto leading-relaxed"
            >
              Automate candidate screening, run proctored coding assessments, and access pre-vetted talent in one unified enterprise platform.
            </motion.p>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.3 }}
              className="flex flex-col sm:flex-row items-center justify-center gap-4"
            >
              <button 
                onClick={handleGetStarted}
                className="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white rounded-xl shadow-lg shadow-blue-500/25 transition-all hover:scale-[1.02] text-base font-bold flex items-center justify-center gap-2"
              >
                Get Free Hiring Audit
                <ArrowRight className="w-5 h-5" />
              </button>
              <button 
                onClick={() => navigate('/about')}
                className="w-full sm:w-auto px-8 py-4 border-2 border-gray-300 text-gray-700 rounded-xl hover:border-blue-600 hover:text-blue-600 transition-all text-base font-semibold flex items-center justify-center"
              >
                Learn About SkillNexus
              </button>
            </motion.div>

            {/* Metrics Bar */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.4 }}
              className="mt-16 grid grid-cols-2 md:grid-cols-4 gap-6 pt-10 border-t border-gray-200/60 max-w-3xl mx-auto"
            >
              {stats.map((stat, index) => (
                <div key={index} className="text-center">
                  <div className="text-3xl md:text-4xl font-extrabold text-blue-600 mb-1">{stat.value}</div>
                  <div className="text-xs font-medium text-gray-500 uppercase tracking-wider">{stat.label}</div>
                </div>
              ))}
            </motion.div>

          </div>
        </div>
      </section>

      {/* ─── Features Section ────────────────────────────────────── */}
      
      <section id="features" className="py-20 bg-white border-y border-gray-100/80">
        <div className="container mx-auto px-4">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
            >
              <span className="inline-flex items-center gap-2 px-3 py-1 bg-blue-50 text-blue-700 rounded-full text-xs font-semibold uppercase tracking-wider mb-4">
                <Cpu className="w-3.5 h-3.5" />
                Platform Features
              </span>
              <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                Built to Solve Technical Hiring
              </h2>
              <p className="text-lg text-gray-600">
                Replace resume screens with objective skill verification and data-backed candidate scorecards.
              </p>
            </motion.div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
            {features.map((feature, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 15 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: index * 0.08 }}
                className="group bg-white p-6 rounded-2xl shadow-sm border border-gray-100 hover:shadow-xl hover:border-blue-200 transition-all duration-300 hover:-translate-y-1"
              >
                <div className={`w-12 h-12 ${feature.bgClass} ${feature.textClass} rounded-xl flex items-center justify-center mb-5 group-hover:scale-110 transition-transform duration-300`}>
                  {feature.icon}
                </div>
                <h3 className="text-lg font-bold text-gray-900 mb-2">
                  {feature.title}
                </h3>
                <p className="text-sm text-gray-600 leading-relaxed">
                  {feature.description}
                </p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* ─── Pricing Section ────────────────────────────────────── */}
      
      <section id="pricing" className="py-20 bg-gray-50/60">
        <div className="container mx-auto px-4">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
            >
              <span className="inline-flex items-center gap-2 px-3 py-1 bg-emerald-50 text-emerald-700 rounded-full text-xs font-semibold uppercase tracking-wider mb-4">
                <DollarSign className="w-3.5 h-3.5" />
                Transparent Pricing
              </span>
              <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                Simple, Transparent Pricing
              </h2>
              <p className="text-lg text-gray-600">
                Select the evaluation volume that best fits your hiring roadmap.
              </p>
            </motion.div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
            {pricingTiers.map((tier, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 15 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: index * 0.1 }}
                className={`bg-white rounded-2xl shadow-sm border flex flex-col justify-between p-8 relative transition-all duration-300 hover:-translate-y-1 ${
                  tier.popular 
                    ? 'border-blue-600 ring-2 ring-blue-600 ring-offset-2 shadow-xl shadow-blue-500/10' 
                    : 'border-gray-200 hover:border-blue-300'
                }`}
              >
                {tier.popular && (
                  <div className="absolute -top-3.5 left-1/2 -translate-x-1/2">
                    <span className="px-3 py-1 bg-gradient-to-r from-blue-600 to-indigo-600 text-white text-xs font-bold rounded-full uppercase tracking-wider shadow-lg shadow-blue-500/30">
                      Most Popular
                    </span>
                  </div>
                )}
                <div>
                  <h3 className="text-xl font-bold text-gray-900">{tier.name}</h3>
                  <div className="mt-4 flex items-baseline gap-1">
                    <span className="text-4xl font-extrabold text-gray-900">{tier.price}</span>
                    <span className="text-sm font-medium text-gray-500">{tier.period}</span>
                  </div>
                  <p className="mt-2 text-sm text-gray-600">{tier.description}</p>
                  
                  <ul className="mt-6 space-y-3 border-t border-gray-100 pt-6">
                    {tier.features.map((feature, idx) => (
                      <li key={idx} className="flex items-start gap-2.5">
                        <CheckCircle className="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" />
                        <span className="text-sm text-gray-600">{feature}</span>
                      </li>
                    ))}
                  </ul>
                </div>

                <button
                  onClick={handlePricingClick}
                  className={`mt-8 w-full py-3 rounded-xl font-semibold text-sm transition-all ${
                    tier.popular
                      ? 'bg-gradient-to-r from-blue-600 to-indigo-600 text-white hover:shadow-lg hover:shadow-blue-500/25 hover:scale-[1.02]'
                      : 'bg-gray-100 text-gray-800 hover:bg-gray-200'
                  }`}
                >
                  {tier.cta}
                </button>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* ─── Testimonials ────────────────────────────────────────── */}
      
      <section className="py-20 bg-white border-y border-gray-100/80">
        <div className="container mx-auto px-4">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
            >
              <span className="inline-flex items-center gap-2 px-3 py-1 bg-purple-50 text-purple-700 rounded-full text-xs font-semibold uppercase tracking-wider mb-4">
                <Star className="w-3.5 h-3.5" />
                Testimonials
              </span>
              <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                Trusted by Engineering Leaders
              </h2>
              <p className="text-lg text-gray-600">
                See how companies scale talent pipelines using SkillNexus.
              </p>
            </motion.div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
            {testimonials.map((testimonial, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 15 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: index * 0.1 }}
                className="bg-white p-6 rounded-2xl border border-gray-100 shadow-sm hover:shadow-lg transition-all duration-300 flex flex-col justify-between"
              >
                <div>
                  <div className="flex mb-4">
                    {[...Array(testimonial.rating)].map((_, i) => (
                      <Star key={i} className="w-4 h-4 fill-amber-400 text-amber-400" />
                    ))}
                  </div>
                  <p className="text-gray-700 text-sm leading-relaxed mb-6 italic">
                    "{testimonial.content}"
                  </p>
                </div>
                <div className="flex items-center gap-3 border-t border-gray-100 pt-4">
                  <img
                    src={testimonial.avatar}
                    alt={testimonial.name}
                    className="w-10 h-10 rounded-full"
                  />
                  <div>
                    <div className="text-sm font-bold text-gray-900">{testimonial.name}</div>
                    <div className="text-xs text-gray-500">{testimonial.role}</div>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* ─── CTA Banner ──────────────────────────────────────────── */}
      
      <section className="py-20 bg-gradient-to-r from-blue-600 via-indigo-600 to-purple-600 text-white relative overflow-hidden">
        <div className="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg width=%2760%27 height=%2760%27 viewBox=%270 0 60 60%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cg fill=%27none%27 fill-rule=%27evenodd%27%3E%3Cg fill=%27%23ffffff%27 fill-opacity=%270.05%27%3E%3Cpath d=%27M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z%27/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')] opacity-50"></div>
        <div className="container mx-auto px-4 text-center max-w-3xl relative z-10">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
          >
            <h2 className="text-3xl md:text-4xl font-extrabold mb-4">
              Transform Your Technical Hiring Today
            </h2>
            <p className="text-lg text-blue-100 mb-8 leading-relaxed">
              Eliminate mis-hires and evaluate talent faster with objective skill verification.
            </p>
            <button 
              onClick={handleGetStarted}
              className="px-8 py-4 bg-white text-blue-600 hover:bg-blue-50 rounded-xl transition-all font-bold shadow-lg inline-flex items-center gap-2 text-base hover:scale-[1.02]"
            >
              Get Free Hiring Audit
              <ArrowRight className="w-5 h-5" />
            </button>
          </motion.div>
        </div>
      </section>

    {/* ─── Footer ──────────────────────────────────────────────── */}

<footer className="bg-gray-900 text-gray-400 py-12 border-t border-gray-800">
  <div className="container mx-auto px-4 max-w-6xl">
    <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">
      
      <div className="col-span-2 md:col-span-1">
        <div 
          className="flex items-center gap-2 mb-4 cursor-pointer"
          onClick={() => navigate('/')}
        >
          <img 
            src={logo} 
            alt="SkillNexus" 
            className="w-8 h-8 rounded-lg shadow-md shadow-blue-500/20"
          />
          <span className="text-white font-bold text-lg">SkillNexus</span>
        </div>
        <p className="text-xs text-gray-400 leading-relaxed mb-4">
          Enterprise candidate verification and skill evaluation platform.
        </p>
        <div className="flex gap-3">
          <a href="https://t.me/skillnexus" target="_blank" rel="noreferrer" className="hover:text-white transition-colors">
            <Send className="w-4 h-4" />
          </a>
          <a href="https://www.linkedin.com/groups/25850074/" target="_blank" rel="noreferrer" className="hover:text-white transition-colors">
            <Linkedin className="w-4 h-4" />
          </a>
          <a href="https://www.youtube.com/@Skillnexusofficial" target="_blank" rel="noreferrer" className="hover:text-white transition-colors">
            <Youtube className="w-4 h-4" />
          </a>
        </div>
      </div>

            <div>
              <h4 className="text-white font-semibold text-xs uppercase tracking-wider mb-4">Navigation</h4>
              <ul className="space-y-2.5 text-xs">
                <li><button onClick={() => scrollToSection('features')} className="hover:text-white transition-colors">Features</button></li>
                <li><button onClick={() => scrollToSection('pricing')} className="hover:text-white transition-colors">Pricing</button></li>
                <li><button onClick={() => navigate('/blog')} className="hover:text-white transition-colors">Blog</button></li>
                <li><button onClick={() => navigate('/about')} className="hover:text-white transition-colors">About Us</button></li>
                <li><button onClick={() => navigate('/contact')} className="hover:text-white transition-colors">Contact</button></li>
              </ul>
            </div>

            <div>
              <h4 className="text-white font-semibold text-xs uppercase tracking-wider mb-4">Contact</h4>
              <ul className="space-y-2.5 text-xs">
                <li><a href="mailto:sales@skillnexus.uk" className="hover:text-white transition-colors">sales@skillnexus.uk</a></li>
                <li><a href="mailto:support@skillnexus.uk" className="hover:text-white transition-colors">support@skillnexus.uk</a></li>
              </ul>
            </div>

            <div>
              <h4 className="text-white font-semibold text-xs uppercase tracking-wider mb-4">Compliance</h4>
              <ul className="space-y-2.5 text-xs">
                <li className="text-gray-400 flex items-center gap-2">
                  <Shield className="w-3 h-3 text-emerald-400" />
                  SOC 2 Type II Compliant
                </li>
                <li className="text-gray-400 flex items-center gap-2">
                  <Globe className="w-3 h-3 text-blue-400" />
                  GDPR & CCPA Compliant
                </li>
                <li className="text-gray-400 flex items-center gap-2">
                  <Server className="w-3 h-3 text-purple-400" />
                  Bias-Free AI Audit Verified
                </li>
              </ul>
            </div>

          </div>

          <div className="border-t border-gray-800 pt-8 text-xs text-center text-gray-500">
            &copy; {new Date().getFullYear()} SkillNexus Platform. All rights reserved.
          </div>
        </div>
      </footer>

      {/* ─── Audit Modal ──────────────────────────────────────────── */}
      
      {showAudit && (
        <div className="fixed inset-0 z-50 overflow-y-auto bg-gray-900/70 backdrop-blur-sm flex items-center justify-center p-4">
          <motion.div
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.3 }}
            className="bg-white rounded-2xl shadow-2xl max-w-2xl w-full p-6 md:p-8 relative max-h-[90vh] overflow-y-auto"
          >
            
            <button 
              onClick={() => {
                setShowAudit(false);
                setAuditSubmitted(false);
                setAuditResult(null);
              }}
              className="absolute top-4 right-4 p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors print:hidden"
            >
              <X className="w-5 h-5" />
            </button>

            {!auditSubmitted ? (
              <div>
                <div className="flex items-center gap-2 mb-2">
                  <div className="p-2 bg-gradient-to-r from-blue-500 to-indigo-500 text-white rounded-lg shadow-md shadow-blue-500/20">
                    <BarChart3 className="w-5 h-5" />
                  </div>
                  <h2 className="text-2xl font-bold text-gray-900">Instant Hiring Audit</h2>
                </div>
                <p className="text-sm text-gray-600 mb-6">
                  Enter your current hiring benchmarks to instantly calculate time-to-hire savings and cost optimizations.
                </p>

                <form onSubmit={handleAuditSubmit} className="space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label className="block text-xs font-semibold text-gray-700 uppercase tracking-wider mb-1">
                        Company Name *
                      </label>
                      <input 
                        type="text" 
                        required
                        value={auditForm.companyName}
                        onChange={(e) => setAuditForm({...auditForm, companyName: e.target.value})}
                        className="w-full px-3.5 py-2 bg-gray-50 border border-gray-300 rounded-xl text-sm focus:ring-2 focus:ring-blue-500 focus:bg-white focus:outline-none transition-colors" 
                        placeholder="Acme Corp" 
                      />
                    </div>

                    <div>
                      <label className="block text-xs font-semibold text-gray-700 uppercase tracking-wider mb-1">
                        Work Email *
                      </label>
                      <input 
                        type="email" 
                        required
                        value={auditForm.email}
                        onChange={(e) => setAuditForm({...auditForm, email: e.target.value})}
                        className="w-full px-3.5 py-2 bg-gray-50 border border-gray-300 rounded-xl text-sm focus:ring-2 focus:ring-blue-500 focus:bg-white focus:outline-none transition-colors" 
                        placeholder="alex@acme.com" 
                      />
                    </div>
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label className="block text-xs font-semibold text-gray-700 uppercase tracking-wider mb-1">
                        Technical Hires / Year
                      </label>
                      <select 
                        value={auditForm.companySize}
                        onChange={(e) => setAuditForm({...auditForm, companySize: e.target.value})}
                        className="w-full px-3.5 py-2 bg-gray-50 border border-gray-300 rounded-xl text-sm focus:ring-2 focus:ring-blue-500 focus:bg-white focus:outline-none transition-colors"
                      >
                        <option value="10">1 - 10 hires/yr</option>
                        <option value="25">11 - 30 hires/yr</option>
                        <option value="60">31 - 100 hires/yr</option>
                        <option value="150">100+ hires/yr</option>
                      </select>
                    </div>

                    <div>
                      <label className="block text-xs font-semibold text-gray-700 uppercase tracking-wider mb-1">
                        Avg. Days to Hire Currently
                      </label>
                      <input 
                        type="number" 
                        value={auditForm.avgDaysToHire}
                        onChange={(e) => setAuditForm({...auditForm, avgDaysToHire: e.target.value})}
                        className="w-full px-3.5 py-2 bg-gray-50 border border-gray-300 rounded-xl text-sm focus:ring-2 focus:ring-blue-500 focus:bg-white focus:outline-none transition-colors" 
                        placeholder="e.g. 45" 
                      />
                    </div>
                  </div>

                  <button 
                    type="submit"
                    disabled={isSubmittingAudit}
                    className="w-full mt-4 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-semibold rounded-xl text-sm transition-all shadow-lg shadow-blue-500/20 flex items-center justify-center gap-2"
                  >
                    {isSubmittingAudit ? (
                      <>
                        <Loader2 className="w-4 h-4 animate-spin" />
                        Analyzing Your Hiring Data...
                      </>
                    ) : (
                      'Generate Instant Audit Report'
                    )}
                  </button>
                </form>

                <div className="mt-4 text-center text-xs text-gray-500">
                  <p>No spam. Unsubscribe anytime. Your data is secure.</p>
                </div>
              </div>
            ) : (
              <div className="space-y-6">
                
                <div className="flex items-center gap-3 bg-emerald-50 p-4 rounded-xl border border-emerald-200">
                  <div className="p-2 bg-emerald-500 rounded-full">
                    <CheckCircle className="w-5 h-5 text-white" />
                  </div>
                  <div>
                    <h3 className="font-bold text-emerald-800">Audit Complete!</h3>
                    <p className="text-xs text-emerald-600">Instant benchmark report generated for {auditForm.companyName || 'Your Organization'}</p>
                  </div>
                </div>

                <div className="border-b border-gray-100 pb-4">
                  <div className="flex items-center justify-between">
                    <span className="text-xs font-bold text-blue-600 uppercase tracking-wider">
                      Hiring Efficiency Report
                    </span>
                    <span className="text-xs text-gray-400">Generated: {new Date().toLocaleDateString()}</span>
                  </div>
                  <h3 className="text-xl font-extrabold text-gray-900 mt-1">
                    Technical Recruitment Efficiency Audit
                  </h3>
                </div>

                {auditResult && (
                  <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
                    <div className="bg-blue-50/70 p-4 rounded-xl border border-blue-100">
                      <div className="flex items-center gap-2 mb-1">
                        <Clock className="w-4 h-4 text-blue-600" />
                        <div className="text-xs font-semibold text-blue-700 uppercase">Time Savings</div>
                      </div>
                      <div className="text-2xl font-black text-blue-900 mt-1">{auditResult.timeSavedPercent}%</div>
                      <div className="text-xs text-blue-600 mt-0.5">
                        {auditResult.daysReduced} days saved ({auditResult.newDaysToHire} days target)
                      </div>
                    </div>

                    <div className="bg-emerald-50/70 p-4 rounded-xl border border-emerald-100">
                      <div className="flex items-center gap-2 mb-1">
                        <DollarSign className="w-4 h-4 text-emerald-600" />
                        <div className="text-xs font-semibold text-emerald-700 uppercase">Annual Cost Saved</div>
                      </div>
                      <div className="text-2xl font-black text-emerald-900 mt-1">
                        ${(auditResult.savingsWithSkillNexus / 1000).toFixed(1)}K
                      </div>
                      <div className="text-xs text-emerald-600 mt-0.5">
                        From ${(auditResult.annualCost / 1000).toFixed(1)}K → ${((auditResult.annualCost - auditResult.savingsWithSkillNexus) / 1000).toFixed(1)}K
                      </div>
                    </div>

                    <div className="bg-purple-50/70 p-4 rounded-xl border border-purple-100">
                      <div className="flex items-center gap-2 mb-1">
                        <Target className="w-4 h-4 text-purple-600" />
                        <div className="text-xs font-semibold text-purple-700 uppercase">Mis-Hire Reduction</div>
                      </div>
                      <div className="text-2xl font-black text-purple-900 mt-1">{auditResult.misHireReduction}%</div>
                      <div className="text-xs text-purple-600 mt-0.5">Via live proctored assessments</div>
                    </div>
                  </div>
                )}

                <div className="bg-gray-50 p-4 rounded-xl border border-gray-200">
                  <div className="flex items-center gap-2 mb-3">
                    <Zap className="w-4 h-4 text-blue-600" />
                    <div className="font-bold text-gray-900 text-sm">Key Recommendations</div>
                  </div>
                  <ul className="space-y-2 text-xs text-gray-600">
                    {auditResult?.recommendations.map((rec, idx) => (
                      <li key={idx} className="flex items-start gap-2">
                        <span className="text-blue-500 font-bold">•</span>
                        <span>{rec}</span>
                      </li>
                    ))}
                  </ul>
                </div>

                <div className="bg-gradient-to-r from-blue-50 to-indigo-50 p-5 rounded-xl border border-blue-200">
                  <h4 className="font-bold text-gray-900 text-sm mb-2">Ready to implement these savings?</h4>
                  <p className="text-xs text-gray-600 mb-4">
                    Create your account to access the full platform and start optimizing your hiring process today.
                  </p>
                  <div className="flex flex-col sm:flex-row gap-3">
                    <button
                      onClick={() => {
                        setShowAudit(false);
                        navigate('/register');
                      }}
                      className="flex-1 py-2.5 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-semibold rounded-xl text-sm transition-colors flex items-center justify-center gap-2 shadow-md shadow-blue-500/20"
                    >
                      <User className="w-4 h-4" />
                      Create Free Account
                    </button>
                    <button
                      onClick={() => {
                        setShowAudit(false);
                        navigate('/login');
                      }}
                      className="flex-1 py-2.5 border-2 border-blue-600 text-blue-600 hover:bg-blue-50 font-semibold rounded-xl text-sm transition-colors flex items-center justify-center gap-2"
                    >
                      <LogIn className="w-4 h-4" />
                      Sign In
                    </button>
                  </div>
                  <p className="text-center text-xs text-gray-400 mt-3">
                    Already have an account? Sign in to access your dashboard.
                  </p>
                </div>

                <div className="flex flex-col sm:flex-row items-center gap-3 pt-2 print:hidden">
                  <button
                    onClick={() => window.print()}
                    className="w-full sm:w-1/2 py-2.5 px-4 bg-gray-900 hover:bg-black text-white font-semibold rounded-xl text-sm transition-colors flex items-center justify-center gap-2"
                  >
                    Print / Save as PDF
                  </button>
                  <button
                    onClick={() => {
                      setShowAudit(false);
                      setAuditSubmitted(false);
                      setAuditResult(null);
                    }}
                    className="w-full sm:w-1/2 py-2.5 px-4 border border-gray-300 hover:bg-gray-50 text-gray-700 font-semibold rounded-xl text-sm transition-colors"
                  >
                    Close Report
                  </button>
                </div>

              </div>
            )}

          </motion.div>
        </div>
      )}
    </div>
  );
}

export default Landing;