
'use client';

import { useState, useEffect } from 'react';
import { motion, useScroll, useTransform } from 'framer-motion';
import {
  Search,
  FileText,
  Handshake,
  Wrench,
  CheckCircle,
  Users,
  Shield,
  TrendingUp,
  Clock,
  DollarSign,
  Star,
  ArrowRight,
  Play,
  Award,
  Target,
  MessageCircle,
  Phone,
  Mail,
  MapPin,
  Zap,
  ThumbsUp,
  BadgeCheck,
  Building2,
  Hammer,
  Droplets,
  Lightbulb,
  TreePine,
  Fence,
  Drill,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Badge } from '@/components/ui/badge';
import { ChatbotWidget } from '@/components/chatbot/chatbot-widget';
import { toast } from 'sonner';
import Image from 'next/image';
import Link from 'next/link';

const TRADES = [
  'Roofing',
  'Building & Construction',
  'Plumbing',
  'Electrical',
  'Solar Installation',
  'Paving & Driveways',
  'Pool Construction',
  'Landscaping',
  'Painting',
  'Fencing',
  'HVAC',
  'Other',
];

const TESTIMONIALS = [
  {
    name: 'Thabo Molefe',
    company: 'Molefe Roofing Services',
    trade: 'Roofing',
    rating: 5,
    text: "I've received 8 confirmed projects in 2 months through Quote2Contract. Best R500 I've ever spent!",
    projectValue: 'R145,000',
    location: 'Johannesburg',
  },
  {
    name: 'Sarah van der Merwe',
    company: 'Crystal Clear Pools',
    trade: 'Pool Construction',
    rating: 5,
    text: 'No more chasing leads that go nowhere. Every project I get is pre-qualified and ready to start.',
    projectValue: 'R320,000',
    location: 'Cape Town',
  },
  {
    name: 'Johan Pretorius',
    company: 'SunPower Solar',
    trade: 'Solar Installation',
    rating: 5,
    text: 'The contracts are professionally done and clients are already convinced. I just show up and do the work!',
    projectValue: 'R89,000',
    location: 'Pretoria',
  },
];

const EXAMPLE_PROJECTS = [
  {
    type: 'Residential Roofing',
    value: 'R145,000',
    location: 'Sandton',
    icon: Building2,
    date: '2 days ago',
    status: 'Contract Signed',
  },
  {
    type: 'Pool Installation',
    value: 'R320,000',
    location: 'Cape Town',
    icon: Droplets,
    date: '1 week ago',
    status: 'Contract Signed',
  },
  {
    type: 'Solar System',
    value: 'R89,000',
    location: 'Durban',
    icon: Lightbulb,
    date: '3 days ago',
    status: 'Contract Signed',
  },
  {
    type: 'Landscaping',
    value: 'R56,000',
    location: 'Pretoria',
    icon: TreePine,
    date: '5 days ago',
    status: 'Contract Signed',
  },
];

const BENEFITS = [
  {
    icon: Users,
    title: 'No Client Chasing',
    description: 'We handle all client communication, qualification, and follow-ups',
  },
  {
    icon: DollarSign,
    title: 'Low Cost, High Value',
    description: 'Only R500 per confirmed project with signed contract',
  },
  {
    icon: Shield,
    title: 'Verified Clients',
    description: 'Pre-screened, genuine clients ready to start work',
  },
  {
    icon: BadgeCheck,
    title: 'Guaranteed Projects',
    description: 'You only pay for signed contracts, not leads',
  },
  {
    icon: Clock,
    title: 'Save Time',
    description: 'Focus on what you do best - delivering quality work',
  },
  {
    icon: TrendingUp,
    title: 'Grow Your Business',
    description: 'Consistent flow of quality projects to scale your operations',
  },
];

const STATS = [
  { label: 'Contractors Registered', value: '1,200+', icon: Users },
  { label: 'Projects Delivered', value: '3,500+', icon: CheckCircle },
  { label: 'Total Project Value', value: 'R450M+', icon: DollarSign },
  { label: 'Average Response Time', value: '< 2 hours', icon: Clock },
];

export function LandingPageClient() {
  const [isFormVisible, setIsFormVisible] = useState(false);
  const [showExitPopup, setShowExitPopup] = useState(false);
  const { scrollYProgress } = useScroll();
  const opacity = useTransform(scrollYProgress, [0, 0.2], [1, 0]);

  const [formData, setFormData] = useState({
    fullName: '',
    companyName: '',
    trade: '',
    city: '',
    phone: '',
    email: '',
  });

  const [isSubmitting, setIsSubmitting] = useState(false);

  useEffect(() => {
    const handleMouseLeave = (e: MouseEvent) => {
      if (e.clientY <= 0 && !showExitPopup) {
        setShowExitPopup(true);
      }
    };

    document.addEventListener('mouseleave', handleMouseLeave);
    return () => document.removeEventListener('mouseleave', handleMouseLeave);
  }, [showExitPopup]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);

    try {
      const response = await fetch('/api/landing/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData),
      });

      if (response.ok) {
        toast.success('Success!', {
          description: "We'll contact you within 24 hours to get you started!",
        });
        setFormData({
          fullName: '',
          companyName: '',
          trade: '',
          city: '',
          phone: '',
          email: '',
        });
      } else {
        throw new Error('Submission failed');
      }
    } catch (error) {
      toast.error('Something went wrong', {
        description: 'Please try again or contact us directly.',
      });
    } finally {
      setIsSubmitting(false);
    }
  };

  const scrollToForm = () => {
    setIsFormVisible(true);
    setTimeout(() => {
      document.getElementById('lead-form')?.scrollIntoView({ behavior: 'smooth' });
    }, 100);
  };

  const scrollToHowItWorks = () => {
    const element = document.getElementById('how-it-works');
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
    }
  };

  return (
    <div className="min-h-screen bg-white">
      {/* Floating Contact Button */}
      <motion.button
        onClick={scrollToForm}
        className="fixed bottom-6 right-6 z-50 bg-green-500 hover:bg-green-600 text-white rounded-full p-4 shadow-2xl transition-all duration-300 hover:scale-110"
        initial={{ scale: 0 }}
        animate={{ scale: 1 }}
        transition={{ delay: 1, type: 'spring' }}
        whileHover={{ scale: 1.1 }}
        whileTap={{ scale: 0.95 }}
      >
        <MessageCircle className="w-6 h-6" />
      </motion.button>

      {/* Exit Intent Popup */}
      {showExitPopup && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4"
          onClick={() => setShowExitPopup(false)}
        >
          <motion.div
            initial={{ scale: 0.8, y: 20 }}
            animate={{ scale: 1, y: 0 }}
            className="bg-white rounded-2xl p-8 max-w-md w-full shadow-2xl"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="text-center">
              <div className="w-16 h-16 bg-gradient-to-br from-green-500 to-teal-600 rounded-full flex items-center justify-center mx-auto mb-4">
                <Zap className="w-8 h-8 text-white" />
              </div>
              <h3 className="text-2xl font-bold mb-2">Wait! Special Offer!</h3>
              <p className="text-gray-600 mb-4">
                Get <span className="font-bold text-green-600">50% off</span> your first secured
                project
              </p>
              <p className="text-3xl font-bold text-green-600 mb-6">Only R250!</p>
              <Button onClick={() => { setShowExitPopup(false); scrollToForm(); }} size="lg" className="w-full">
                Claim My Discount
              </Button>
              <button
                onClick={() => setShowExitPopup(false)}
                className="mt-4 text-sm text-gray-500 hover:text-gray-700"
              >
                No thanks, I'll pay full price
              </button>
            </div>
          </motion.div>
        </motion.div>
      )}

      {/* Hero Section */}
      <section className="relative bg-gradient-to-br from-blue-50 via-white to-green-50 overflow-hidden">
        <div className="absolute inset-0 bg-grid-pattern opacity-5"></div>
        
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-20 pb-16 lg:pt-32 lg:pb-24">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            {/* Left Content */}
            <motion.div
              initial={{ opacity: 0, x: -50 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.6 }}
            >
              <Badge className="mb-4 bg-green-100 text-green-800 hover:bg-green-100">
                <Zap className="w-3 h-3 mr-1" />
                Trusted by 1,200+ Contractors
              </Badge>
              
              <h1 className="text-4xl lg:text-6xl font-bold text-gray-900 mb-6 leading-tight">
                We Turn Your Contractor Quotes Into{' '}
                <span className="bg-gradient-to-r from-green-600 to-teal-600 bg-clip-text text-transparent">
                  Signed Contracts
                </span>
                {' '}– Fast!
              </h1>
              
              <p className="text-xl text-gray-600 mb-8 leading-relaxed">
                Quote2Contract finds the right clients, prepares your quotes, seals the deal, and
                sells you the confirmed project — all for just <span className="font-bold text-green-600">R500</span>.
              </p>

              <div className="flex flex-col sm:flex-row gap-4 mb-8">
                <Button
                  size="lg"
                  className="bg-gradient-to-r from-green-600 to-teal-600 hover:from-green-700 hover:to-teal-700 text-lg px-8"
                  onClick={scrollToForm}
                >
                  Get My Next Job for R500
                  <ArrowRight className="ml-2 w-5 h-5" />
                </Button>
                <Button 
                  size="lg" 
                  variant="outline" 
                  className="text-lg"
                  onClick={scrollToHowItWorks}
                >
                  <Play className="mr-2 w-5 h-5" />
                  Watch How It Works
                </Button>
              </div>

              {/* Trust Badges */}
              <div className="flex items-center gap-6 text-sm text-gray-600">
                <div className="flex items-center">
                  <CheckCircle className="w-5 h-5 text-green-600 mr-2" />
                  No upfront fees
                </div>
                <div className="flex items-center">
                  <CheckCircle className="w-5 h-5 text-green-600 mr-2" />
                  Verified clients only
                </div>
                <div className="flex items-center">
                  <CheckCircle className="w-5 h-5 text-green-600 mr-2" />
                  Signed contracts
                </div>
              </div>
            </motion.div>

            {/* Right Visual - Process Flow */}
            <motion.div
              initial={{ opacity: 0, x: 50 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.6, delay: 0.2 }}
              className="relative"
            >
              <div className="bg-white rounded-2xl shadow-2xl p-8 border border-gray-100">
                <h3 className="text-lg font-semibold mb-6 text-center">The Quote2Contract Process</h3>
                
                <div className="space-y-4">
                  {[
                    { icon: Search, title: 'We Find Leads', color: 'from-blue-500 to-blue-600' },
                    { icon: FileText, title: 'We Create Quote', color: 'from-purple-500 to-purple-600' },
                    { icon: Handshake, title: 'We Seal Contract', color: 'from-green-500 to-green-600' },
                    { icon: Wrench, title: 'You Get Project', color: 'from-orange-500 to-orange-600' },
                  ].map((step, index) => (
                    <motion.div
                      key={index}
                      initial={{ opacity: 0, x: 20 }}
                      animate={{ opacity: 1, x: 0 }}
                      transition={{ delay: 0.4 + index * 0.1 }}
                      className="flex items-center gap-4 p-4 rounded-xl bg-gray-50 hover:bg-gray-100 transition-colors"
                    >
                      <div className={`w-12 h-12 rounded-full bg-gradient-to-br ${step.color} flex items-center justify-center flex-shrink-0`}>
                        <step.icon className="w-6 h-6 text-white" />
                      </div>
                      <div className="flex-1">
                        <h4 className="font-semibold text-gray-900">{step.title}</h4>
                        <p className="text-sm text-gray-600">Step {index + 1}</p>
                      </div>
                      {index < 3 && <ArrowRight className="w-5 h-5 text-gray-400" />}
                    </motion.div>
                  ))}
                </div>

                <div className="mt-6 p-4 bg-gradient-to-r from-green-50 to-teal-50 rounded-xl border border-green-200">
                  <div className="flex items-center justify-between">
                    <span className="font-semibold text-gray-900">Your Investment:</span>
                    <span className="text-2xl font-bold text-green-600">Only R500</span>
                  </div>
                </div>
              </div>
            </motion.div>
          </div>
        </div>
      </section>

      {/* Stats Section */}
      <section className="py-12 bg-gradient-to-r from-green-600 to-teal-600">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
            {STATS.map((stat, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: index * 0.1 }}
                className="text-center text-white"
              >
                <stat.icon className="w-8 h-8 mx-auto mb-2 opacity-80" />
                <div className="text-3xl font-bold mb-1">{stat.value}</div>
                <div className="text-sm opacity-90">{stat.label}</div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* How It Works - Detailed */}
      <section className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-center mb-16"
          >
            <Badge className="mb-4 bg-blue-100 text-blue-800 hover:bg-blue-100">
              Simple Process
            </Badge>
            <h2 className="text-4xl font-bold mb-4">How Quote2Contract Works</h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              We handle everything from lead generation to contract signing. You just focus on delivering great work.
            </p>
          </motion.div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {[
              {
                step: '01',
                icon: Search,
                title: 'We Find the Leads',
                description: 'Our team actively searches for quality leads matching your trade and service area.',
                color: 'from-blue-500 to-blue-600',
              },
              {
                step: '02',
                icon: FileText,
                title: 'We Quote on Your Behalf',
                description: 'We create professional, competitive quotes using your pricing and present them to clients.',
                color: 'from-purple-500 to-purple-600',
              },
              {
                step: '03',
                icon: Handshake,
                title: 'We Secure the Contract',
                description: 'We negotiate, follow up, and get the contract signed - all the hard work done for you.',
                color: 'from-green-500 to-green-600',
              },
              {
                step: '04',
                icon: Wrench,
                title: 'You Get the Project',
                description: 'Receive a confirmed, signed project ready to start. Pay R500 and begin work immediately.',
                color: 'from-orange-500 to-orange-600',
              },
            ].map((item, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: index * 0.1 }}
              >
                <Card className="h-full hover:shadow-xl transition-shadow border-2 border-transparent hover:border-green-200">
                  <CardContent className="p-6">
                    <div className={`w-16 h-16 rounded-2xl bg-gradient-to-br ${item.color} flex items-center justify-center mb-4`}>
                      <item.icon className="w-8 h-8 text-white" />
                    </div>
                    <div className="text-sm font-bold text-gray-400 mb-2">{item.step}</div>
                    <h3 className="text-xl font-bold mb-3">{item.title}</h3>
                    <p className="text-gray-600 leading-relaxed">{item.description}</p>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Benefits Section */}
      <section className="py-20 bg-gradient-to-br from-gray-50 to-blue-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-center mb-16"
          >
            <Badge className="mb-4 bg-green-100 text-green-800 hover:bg-green-100">
              Why Contractors Love Us
            </Badge>
            <h2 className="text-4xl font-bold mb-4">Why Contractors Choose Quote2Contract</h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Focus on your craft while we handle the business development
            </p>
          </motion.div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {BENEFITS.map((benefit, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: index * 0.1 }}
              >
                <Card className="h-full hover:shadow-xl transition-all hover:-translate-y-1">
                  <CardContent className="p-6">
                    <div className="w-14 h-14 rounded-xl bg-gradient-to-br from-green-500 to-teal-600 flex items-center justify-center mb-4">
                      <benefit.icon className="w-7 h-7 text-white" />
                    </div>
                    <h3 className="text-xl font-bold mb-2">{benefit.title}</h3>
                    <p className="text-gray-600">{benefit.description}</p>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Example Projects */}
      <section className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-center mb-16"
          >
            <Badge className="mb-4 bg-purple-100 text-purple-800 hover:bg-purple-100">
              Recent Success Stories
            </Badge>
            <h2 className="text-4xl font-bold mb-4">Recent Confirmed Projects</h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Real projects secured by Quote2Contract for contractors just like you
            </p>
          </motion.div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            {EXAMPLE_PROJECTS.map((project, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, scale: 0.9 }}
                whileInView={{ opacity: 1, scale: 1 }}
                viewport={{ once: true }}
                transition={{ delay: index * 0.1 }}
              >
                <Card className="hover:shadow-lg transition-shadow">
                  <CardContent className="p-6">
                    <div className="flex items-center justify-between mb-4">
                      <div className="w-12 h-12 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
                        <project.icon className="w-6 h-6 text-white" />
                      </div>
                      <Badge className="bg-green-100 text-green-800">
                        {project.status}
                      </Badge>
                    </div>
                    <h3 className="font-bold text-lg mb-2">{project.type}</h3>
                    <div className="space-y-2 text-sm text-gray-600">
                      <div className="flex items-center">
                        <DollarSign className="w-4 h-4 mr-2 text-green-600" />
                        <span className="font-semibold text-green-600">{project.value}</span>
                      </div>
                      <div className="flex items-center">
                        <MapPin className="w-4 h-4 mr-2" />
                        {project.location}
                      </div>
                      <div className="flex items-center">
                        <Clock className="w-4 h-4 mr-2" />
                        {project.date}
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Testimonials */}
      <section className="py-20 bg-gradient-to-br from-blue-50 to-purple-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-center mb-16"
          >
            <Badge className="mb-4 bg-orange-100 text-orange-800 hover:bg-orange-100">
              <ThumbsUp className="w-3 h-3 mr-1" />
              Contractor Reviews
            </Badge>
            <h2 className="text-4xl font-bold mb-4">What Contractors Are Saying</h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Join hundreds of satisfied contractors growing their business with Quote2Contract
            </p>
          </motion.div>

          <div className="grid md:grid-cols-3 gap-8">
            {TESTIMONIALS.map((testimonial, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: index * 0.1 }}
              >
                <Card className="h-full hover:shadow-xl transition-shadow">
                  <CardContent className="p-6">
                    <div className="flex items-center mb-4">
                      {[...Array(testimonial.rating)].map((_, i) => (
                        <Star key={i} className="w-5 h-5 text-yellow-400 fill-yellow-400" />
                      ))}
                    </div>
                    <p className="text-gray-700 mb-4 italic">"{testimonial.text}"</p>
                    <div className="border-t pt-4">
                      <div className="font-bold">{testimonial.name}</div>
                      <div className="text-sm text-gray-600">{testimonial.company}</div>
                      <div className="flex items-center justify-between mt-2">
                        <Badge variant="outline" className="text-xs">
                          {testimonial.trade}
                        </Badge>
                        <span className="text-xs text-gray-500">{testimonial.location}</span>
                      </div>
                      <div className="mt-2 text-sm font-semibold text-green-600">
                        Project Value: {testimonial.projectValue}
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Pricing Section */}
      <section className="py-20 bg-white">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
          >
            <Badge className="mb-4 bg-green-100 text-green-800 hover:bg-green-100">
              <Award className="w-3 h-3 mr-1" />
              Transparent Pricing
            </Badge>
            <h2 className="text-5xl font-bold mb-6">Only R500 Per Secured Contract</h2>
            <p className="text-2xl text-gray-600 mb-4">
              No subscriptions. No hidden fees. No risk.
            </p>
            <p className="text-xl text-gray-500 mb-12">
              You only pay once we've sealed the deal and you've got a signed contract
            </p>

            <Card className="max-w-md mx-auto border-2 border-green-500 shadow-2xl">
              <CardContent className="p-8">
                <div className="text-center mb-6">
                  <div className="text-6xl font-bold text-green-600 mb-2">R500</div>
                  <div className="text-gray-600">per confirmed project</div>
                </div>
                
                <div className="space-y-3 mb-8 text-left">
                  {[
                    'Pre-qualified client',
                    'Professional quote prepared',
                    'Contract negotiated & signed',
                    'Ready-to-start project',
                    'Client contact details',
                    'Project documentation',
                  ].map((item, index) => (
                    <div key={index} className="flex items-center">
                      <CheckCircle className="w-5 h-5 text-green-600 mr-3 flex-shrink-0" />
                      <span>{item}</span>
                    </div>
                  ))}
                </div>

                <Button
                  size="lg"
                  className="w-full bg-gradient-to-r from-green-600 to-teal-600 hover:from-green-700 hover:to-teal-700 text-lg"
                  onClick={scrollToForm}
                >
                  Get Started for R500
                  <ArrowRight className="ml-2" />
                </Button>

                <div className="mt-4 p-3 bg-yellow-50 rounded-lg border border-yellow-200">
                  <div className="flex items-center justify-center text-sm font-semibold text-yellow-800">
                    <Zap className="w-4 h-4 mr-2" />
                    Limited Time: First project FREE for new contractors!
                  </div>
                </div>
              </CardContent>
            </Card>
          </motion.div>
        </div>
      </section>

      {/* Lead Capture Form */}
      <section id="lead-form" className="py-20 bg-gradient-to-br from-green-600 to-teal-600">
        <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-center mb-12"
          >
            <h2 className="text-4xl font-bold text-white mb-4">
              Ready to Get Your Next Project?
            </h2>
            <p className="text-xl text-white/90">
              Fill out the form below and we'll contact you within 24 hours
            </p>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, scale: 0.95 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true }}
          >
            <Card className="shadow-2xl">
              <CardContent className="p-8">
                <form onSubmit={handleSubmit} className="space-y-6">
                  <div className="grid md:grid-cols-2 gap-6">
                    <div className="space-y-2">
                      <Label htmlFor="fullName">
                        Full Name <span className="text-red-500">*</span>
                      </Label>
                      <Input
                        id="fullName"
                        required
                        placeholder="John Doe"
                        value={formData.fullName}
                        onChange={(e) => setFormData({ ...formData, fullName: e.target.value })}
                      />
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="companyName">
                        Company Name <span className="text-red-500">*</span>
                      </Label>
                      <Input
                        id="companyName"
                        required
                        placeholder="ABC Construction"
                        value={formData.companyName}
                        onChange={(e) => setFormData({ ...formData, companyName: e.target.value })}
                      />
                    </div>
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="trade">
                      Trade / Service <span className="text-red-500">*</span>
                    </Label>
                    <Select
                      required
                      value={formData.trade}
                      onValueChange={(value) => setFormData({ ...formData, trade: value })}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="Select your trade" />
                      </SelectTrigger>
                      <SelectContent>
                        {TRADES.map((trade) => (
                          <SelectItem key={trade} value={trade}>
                            {trade}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="city">
                      City / Service Area <span className="text-red-500">*</span>
                    </Label>
                    <Input
                      id="city"
                      required
                      placeholder="Johannesburg"
                      value={formData.city}
                      onChange={(e) => setFormData({ ...formData, city: e.target.value })}
                    />
                  </div>

                  <div className="grid md:grid-cols-2 gap-6">
                    <div className="space-y-2">
                      <Label htmlFor="phone">
                        Phone / WhatsApp <span className="text-red-500">*</span>
                      </Label>
                      <Input
                        id="phone"
                        type="tel"
                        required
                        placeholder="+27 82 123 4567"
                        value={formData.phone}
                        onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                      />
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="email">
                        Email Address <span className="text-red-500">*</span>
                      </Label>
                      <Input
                        id="email"
                        type="email"
                        required
                        placeholder="john@example.com"
                        value={formData.email}
                        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                      />
                    </div>
                  </div>

                  <Button
                    type="submit"
                    size="lg"
                    className="w-full bg-gradient-to-r from-green-600 to-teal-600 hover:from-green-700 hover:to-teal-700"
                    disabled={isSubmitting}
                  >
                    {isSubmitting ? (
                      <>
                        <motion.div
                          animate={{ rotate: 360 }}
                          transition={{ duration: 1, repeat: Infinity, ease: 'linear' }}
                        >
                          <Clock className="w-5 h-5 mr-2" />
                        </motion.div>
                        Submitting...
                      </>
                    ) : (
                      <>
                        Submit & Start Getting Projects
                        <ArrowRight className="ml-2" />
                      </>
                    )}
                  </Button>

                  <p className="text-xs text-center text-gray-500">
                    By submitting, you agree to receive communications from Quote2Contract. We respect your privacy.
                  </p>
                </form>
              </CardContent>
            </Card>
          </motion.div>
        </div>
      </section>

      {/* Trust & Compliance */}
      <section className="py-16 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid md:grid-cols-4 gap-8 text-center">
            {[
              { icon: BadgeCheck, title: 'Pre-verified Clients', desc: 'All leads screened' },
              { icon: Shield, title: 'Secure Contracts', desc: 'Legal & binding' },
              { icon: Award, title: 'Quality Assured', desc: 'Premium projects only' },
              { icon: Clock, title: 'Fast Response', desc: '< 24 hour turnaround' },
            ].map((item, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: index * 0.1 }}
                className="flex flex-col items-center"
              >
                <div className="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mb-4">
                  <item.icon className="w-8 h-8 text-green-600" />
                </div>
                <h3 className="font-bold mb-1">{item.title}</h3>
                <p className="text-sm text-gray-600">{item.desc}</p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid md:grid-cols-4 gap-8 mb-8">
            <div>
              <div className="flex items-center space-x-2 mb-4">
                <div className="w-8 h-8 bg-gradient-to-br from-green-500 to-teal-600 rounded-lg flex items-center justify-center">
                  <span className="text-white font-bold text-sm">Q2C</span>
                </div>
                <span className="text-xl font-bold">Quote2Contract</span>
              </div>
              <p className="text-gray-400 text-sm">
                Connecting quality contractors with verified clients across South Africa.
              </p>
            </div>

            <div>
              <h4 className="font-bold mb-4">Quick Links</h4>
              <ul className="space-y-2 text-sm text-gray-400">
                <li><Link href="/" className="hover:text-white">Home</Link></li>
                <li><Link href="#how-it-works" className="hover:text-white">How It Works</Link></li>
                <li><Link href="#pricing" className="hover:text-white">Pricing</Link></li>
                <li><Link href="/auth/signup" className="hover:text-white">Get Started</Link></li>
              </ul>
            </div>

            <div>
              <h4 className="font-bold mb-4">Services</h4>
              <ul className="space-y-2 text-sm text-gray-400">
                <li>Roofing Projects</li>
                <li>Pool Construction</li>
                <li>Solar Installation</li>
                <li>General Building</li>
              </ul>
            </div>

            <div>
              <h4 className="font-bold mb-4">Contact Us</h4>
              <ul className="space-y-2 text-sm text-gray-400">
                <li className="flex items-center">
                  <Phone className="w-4 h-4 mr-2" />
                  +27 82 XXX XXXX
                </li>
                <li className="flex items-center">
                  <Mail className="w-4 h-4 mr-2" />
                  info@quote2contract.co.za
                </li>
                <li className="flex items-center">
                  <MapPin className="w-4 h-4 mr-2" />
                  Johannesburg, SA
                </li>
              </ul>
              <Button
                className="mt-4 bg-green-600 hover:bg-green-700"
                size="sm"
                onClick={scrollToForm}
              >
                <MessageCircle className="w-4 h-4 mr-2" />
                Contact Us
              </Button>
            </div>
          </div>

          <div className="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center text-sm text-gray-400">
            <p>© 2025 Quote2Contract. All rights reserved.</p>
            <div className="flex space-x-6 mt-4 md:mt-0">
              <Link href="/" className="hover:text-white">Home</Link>
              <Link href="/auth/signin" className="hover:text-white">Sign In</Link>
              <Link href="/auth/signup" className="hover:text-white">Get Started</Link>
            </div>
          </div>
        </div>
      </footer>

      {/* AI Chatbot Widget */}
      <ChatbotWidget />

      <style jsx>{`
        .bg-grid-pattern {
          background-image: 
            linear-gradient(to right, #e5e7eb 1px, transparent 1px),
            linear-gradient(to bottom, #e5e7eb 1px, transparent 1px);
          background-size: 40px 40px;
        }
      `}</style>
    </div>
  );
}
