import { useState } from 'react';
import { Button } from '../ui/button';
import { Input } from '../ui/input';
import { Label } from '../ui/label';
import { Textarea } from '../ui/textarea';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
import { RadioGroup, RadioGroupItem } from '../ui/radio-group';
import { Checkbox } from '../ui/checkbox';
import { CheckCircle, Users, Star, Shield, LogIn, Award, TrendingUp, Handshake } from 'lucide-react';
import { toast } from 'sonner';
// import backgroundImage from 'figma:asset/ee01d864b6e23a8197b42f3168c98eedec9d2440.png';

interface ApplicationFormPageProps {
  onAdminLogin: () => void;
}

export function ApplicationFormPage({ onAdminLogin }: ApplicationFormPageProps) {
  const [formData, setFormData] = useState({
    country: '',
    state: '',
    district: '',
    name: '',
    interestedCity: '',
    email: '',
    pincode: '',
    mobile: '',
    ownRoyalEnfield: '',
    royalEnfieldModel: '',
    age: '',
    education: '',
    companyName: '',
    source: '',
    existingDealer: '',
    description: '',
    address: '',
    acceptTerms: false
  });

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

    // Validate required fields
    if (!formData.country || !formData.state || !formData.district || !formData.name ||
      !formData.interestedCity || !formData.email || !formData.pincode || !formData.mobile ||
      !formData.ownRoyalEnfield || !formData.age || !formData.education ||
      !formData.companyName || !formData.source || !formData.existingDealer ||
      !formData.description || !formData.address) {
      toast.error('Please fill in all required fields');
      return;
    }

    // Validate Royal Enfield model if they own one
    if (formData.ownRoyalEnfield === 'yes' && !formData.royalEnfieldModel) {
      toast.error('Please select your Royal Enfield model');
      return;
    }

    // Validate terms acceptance
    if (!formData.acceptTerms) {
      toast.error('Please accept the terms and conditions to continue');
      return;
    }

    // Success message
    toast.success('Application submitted successfully! We will contact you soon.');

    // Reset form
    setFormData({
      country: '',
      state: '',
      district: '',
      name: '',
      interestedCity: '',
      email: '',
      pincode: '',
      mobile: '',
      ownRoyalEnfield: '',
      royalEnfieldModel: '',
      age: '',
      education: '',
      companyName: '',
      source: '',
      existingDealer: '',
      description: '',
      address: '',
      acceptTerms: false
    });
  };

  return (
    <div className="min-h-screen bg-slate-950">
      {/* Header */}
      <header className="bg-black/90 backdrop-blur-md border-b border-amber-500/20 sticky top-0 z-50 shadow-xl">
        <div className="max-w-7xl mx-auto px-6 py-5 flex items-center justify-between">
          <div className="flex items-center gap-4">
            <div className="w-12 h-12 bg-gradient-to-br from-amber-500 to-orange-600 rounded-lg flex items-center justify-center shadow-lg">
              <span className="text-white text-xl">RE</span>
            </div>
            <div>
              <h1 className="text-white text-2xl tracking-tight">Royal Enfield</h1>
              <p className="text-amber-400/80 text-xs tracking-wide uppercase">Dealer Partnership Portal</p>
            </div>
          </div>
          <Button
            variant="outline"
            onClick={onAdminLogin}
            className="flex items-center gap-2 bg-white/5 border-amber-500/30 text-amber-400 hover:bg-amber-500/10 hover:border-amber-500/50 hover:text-amber-300 transition-all"
          >
            <LogIn className="w-4 h-4" />
            Admin Login
          </Button>
        </div>
      </header>

      {/* Hero Section */}
      <section className="relative py-24 overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950"></div>
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(251,191,36,0.1),transparent_50%)]"></div>
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_bottom_left,rgba(251,146,60,0.1),transparent_50%)]"></div>

        <div className="max-w-7xl mx-auto px-6 text-center relative z-10">
          <div className="inline-block mb-6">
            <div className="bg-amber-500/10 border border-amber-500/30 rounded-full px-6 py-2">
              <p className="text-amber-400 text-sm tracking-wide">Since 1901 • Legacy of Excellence</p>
            </div>
          </div>
          <h1 className="text-5xl md:text-6xl text-white mb-6 tracking-tight">
            Join the Royal Enfield
            <span className="block text-transparent bg-clip-text bg-gradient-to-r from-amber-400 to-orange-500">
              Partnership Network
            </span>
          </h1>
          <p className="text-slate-300 text-lg md:text-xl max-w-3xl mx-auto mb-12 leading-relaxed">
            Become part of our legendary heritage and bring the spirit of Pure Motorcycling to riders in your community
          </p>
          <div className="flex flex-wrap justify-center gap-8">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-full bg-amber-500/20 flex items-center justify-center">
                <CheckCircle className="w-5 h-5 text-amber-400" />
              </div>
              <span className="text-slate-200">120+ Year Heritage</span>
            </div>
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-full bg-amber-500/20 flex items-center justify-center">
                <CheckCircle className="w-5 h-5 text-amber-400" />
              </div>
              <span className="text-slate-200">Global Recognition</span>
            </div>
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-full bg-amber-500/20 flex items-center justify-center">
                <CheckCircle className="w-5 h-5 text-amber-400" />
              </div>
              <span className="text-slate-200">Premium Support</span>
            </div>
          </div>
        </div>
      </section>

      {/* Why Partner Section */}
      <section className="py-20 bg-slate-900/50">
        <div className="max-w-7xl mx-auto px-6">
          <div className="text-center mb-16">
            <h2 className="text-4xl text-white mb-4">Why Partner With Royal Enfield?</h2>
            <p className="text-slate-400 text-lg">Unmatched benefits for ambitious entrepreneurs</p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {/* Premium Brand */}
            <div className="group relative bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur border border-slate-700/50 rounded-2xl p-8 text-center hover:border-amber-500/50 transition-all duration-300 hover:shadow-2xl hover:shadow-amber-500/10">
              <div className="w-16 h-16 bg-gradient-to-br from-amber-500 to-orange-600 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform shadow-lg">
                <Star className="w-8 h-8 text-white" />
              </div>
              <h3 className="text-white text-xl mb-3">Premium Brand</h3>
              <p className="text-slate-400 text-sm leading-relaxed">
                Represent a legendary brand trusted by millions worldwide since 1901
              </p>
            </div>

            {/* Strong Support */}
            <div className="group relative bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur border border-slate-700/50 rounded-2xl p-8 text-center hover:border-amber-500/50 transition-all duration-300 hover:shadow-2xl hover:shadow-amber-500/10">
              <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform shadow-lg">
                <Handshake className="w-8 h-8 text-white" />
              </div>
              <h3 className="text-white text-xl mb-3">Complete Support</h3>
              <p className="text-slate-400 text-sm leading-relaxed">
                Comprehensive training, marketing, and ongoing operational support
              </p>
            </div>

            {/* Growth Opportunity */}
            <div className="group relative bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur border border-slate-700/50 rounded-2xl p-8 text-center hover:border-amber-500/50 transition-all duration-300 hover:shadow-2xl hover:shadow-amber-500/10">
              <div className="w-16 h-16 bg-gradient-to-br from-emerald-500 to-teal-600 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform shadow-lg">
                <TrendingUp className="w-8 h-8 text-white" />
              </div>
              <h3 className="text-white text-xl mb-3">Growth Potential</h3>
              <p className="text-slate-400 text-sm leading-relaxed">
                Tap into expanding markets with increasing customer demand
              </p>
            </div>

            {/* Proven Success */}
            <div className="group relative bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur border border-slate-700/50 rounded-2xl p-8 text-center hover:border-amber-500/50 transition-all duration-300 hover:shadow-2xl hover:shadow-amber-500/10">
              <div className="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-600 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform shadow-lg">
                <Award className="w-8 h-8 text-white" />
              </div>
              <h3 className="text-white text-xl mb-3">Proven Model</h3>
              <p className="text-slate-400 text-sm leading-relaxed">
                Join thousands of successful dealers in our global network
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Application Form Section */}
      <section className="relative py-24 overflow-hidden">
        {/* Background Image with Overlay */}
        <div className="absolute inset-0">
          {/* <img 
            src={backgroundImage} 
            alt="Royal Enfield Showroom" 
            className="w-full h-full object-cover"
          /> */}
          <div className="absolute inset-0 bg-gradient-to-br from-slate-950/95 via-slate-900/90 to-slate-950/95 backdrop-blur-sm"></div>
        </div>

        <div className="max-w-4xl mx-auto px-6 relative z-10">
          <div className="text-center mb-12">
            <div className="inline-block mb-4">
              <div className="bg-amber-500/10 border border-amber-500/30 rounded-full px-5 py-2">
                <p className="text-amber-400 text-sm tracking-wide">Start Your Journey</p>
              </div>
            </div>
            <h2 className="text-4xl text-white mb-4">Dealership Application</h2>
            <p className="text-slate-300 text-lg">
              Complete the form below to begin your partnership with Royal Enfield
            </p>
          </div>

          <form onSubmit={handleSubmit} className="bg-slate-900/60 backdrop-blur-xl rounded-3xl border border-slate-700/50 p-10 shadow-2xl">
            <div className="space-y-7">
              {/* Name & Email */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <Label htmlFor="name" className="flex items-center gap-2 text-slate-200 mb-3">
                    <Users className="w-4 h-4 text-amber-400" />
                    Full Name <span className="text-amber-500">*</span>
                  </Label>
                  <Input
                    id="name"
                    placeholder="Enter your full name"
                    value={formData.name}
                    onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                    className="bg-slate-800/50 border-slate-600/50 text-white placeholder:text-slate-500 focus:border-amber-500/50 focus:ring-amber-500/20"
                    required
                  />
                </div>
                <div>
                  <Label htmlFor="email" className="flex items-center gap-2 text-slate-200 mb-3">
                    <span className="text-amber-400">✉️</span>
                    Email Address <span className="text-amber-500">*</span>
                  </Label>
                  <Input
                    id="email"
                    type="email"
                    placeholder="your-email@example.com"
                    value={formData.email}
                    onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                    className="bg-slate-800/50 border-slate-600/50 text-white placeholder:text-slate-500 focus:border-amber-500/50 focus:ring-amber-500/20"
                    required
                  />
                </div>
              </div>

              {/* Mobile & Age */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <Label htmlFor="mobile" className="flex items-center gap-2 text-slate-200 mb-3">
                    <span className="text-amber-400">📱</span>
                    Mobile Number <span className="text-amber-500">*</span>
                  </Label>
                  <Input
                    id="mobile"
                    type="tel"
                    placeholder="+91 98765 43210"
                    value={formData.mobile}
                    onChange={(e) => setFormData({ ...formData, mobile: e.target.value })}
                    className="bg-slate-800/50 border-slate-600/50 text-white placeholder:text-slate-500 focus:border-amber-500/50 focus:ring-amber-500/20"
                    required
                  />
                </div>
                <div>
                  <Label htmlFor="age" className="flex items-center gap-2 text-slate-200 mb-3">
                    <span className="text-amber-400">👤</span>
                    Age <span className="text-amber-500">*</span>
                  </Label>
                  <Input
                    id="age"
                    type="number"
                    placeholder="Enter your age"
                    value={formData.age}
                    onChange={(e) => setFormData({ ...formData, age: e.target.value })}
                    className="bg-slate-800/50 border-slate-600/50 text-white placeholder:text-slate-500 focus:border-amber-500/50 focus:ring-amber-500/20"
                    required
                  />
                </div>
              </div>

              {/* Country, State, District */}
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div>
                  <Label htmlFor="country" className="flex items-center gap-2 text-slate-200 mb-3">
                    <span className="text-amber-400">🌍</span>
                    Country <span className="text-amber-500">*</span>
                  </Label>
                  <Select value={formData.country} onValueChange={(value) => setFormData({ ...formData, country: value })}>
                    <SelectTrigger className="bg-slate-800/50 border-slate-600/50 text-white focus:border-amber-500/50 focus:ring-amber-500/20">
                      <SelectValue placeholder="Select country" />
                    </SelectTrigger>
                    <SelectContent className="bg-slate-800 border-slate-700 text-white">
                      <SelectItem value="india">India</SelectItem>
                      <SelectItem value="nepal">Nepal</SelectItem>
                      <SelectItem value="bangladesh">Bangladesh</SelectItem>
                      <SelectItem value="sri-lanka">Sri Lanka</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div>
                  <Label htmlFor="state" className="flex items-center gap-2 text-slate-200 mb-3">
                    <span className="text-amber-400">🏛️</span>
                    State <span className="text-amber-500">*</span>
                  </Label>
                  <Select value={formData.state} onValueChange={(value) => setFormData({ ...formData, state: value })}>
                    <SelectTrigger className="bg-slate-800/50 border-slate-600/50 text-white focus:border-amber-500/50 focus:ring-amber-500/20">
                      <SelectValue placeholder="Select state" />
                    </SelectTrigger>
                    <SelectContent className="bg-slate-800 border-slate-700 text-white">
                      <SelectItem value="maharashtra">Maharashtra</SelectItem>
                      <SelectItem value="karnataka">Karnataka</SelectItem>
                      <SelectItem value="tamil-nadu">Tamil Nadu</SelectItem>
                      <SelectItem value="delhi">Delhi</SelectItem>
                      <SelectItem value="rajasthan">Rajasthan</SelectItem>
                      <SelectItem value="uttar-pradesh">Uttar Pradesh</SelectItem>
                      <SelectItem value="gujarat">Gujarat</SelectItem>
                      <SelectItem value="west-bengal">West Bengal</SelectItem>
                      <SelectItem value="andhra-pradesh">Andhra Pradesh</SelectItem>
                      <SelectItem value="telangana">Telangana</SelectItem>
                      <SelectItem value="kerala">Kerala</SelectItem>
                      <SelectItem value="punjab">Punjab</SelectItem>
                      <SelectItem value="haryana">Haryana</SelectItem>
                      <SelectItem value="madhya-pradesh">Madhya Pradesh</SelectItem>
                      <SelectItem value="odisha">Odisha</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div>
                  <Label htmlFor="district" className="flex items-center gap-2 text-slate-200 mb-3">
                    <span className="text-amber-400">📍</span>
                    District <span className="text-amber-500">*</span>
                  </Label>
                  <Input
                    id="district"
                    placeholder="Enter district"
                    value={formData.district}
                    onChange={(e) => setFormData({ ...formData, district: e.target.value })}
                    className="bg-slate-800/50 border-slate-600/50 text-white placeholder:text-slate-500 focus:border-amber-500/50 focus:ring-amber-500/20"
                    required
                  />
                </div>
              </div>

              {/* Interested City & Pincode */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <Label htmlFor="interestedCity" className="flex items-center gap-2 text-slate-200 mb-3">
                    <span className="text-amber-400">🏙️</span>
                    Interested City for Dealership <span className="text-amber-500">*</span>
                  </Label>
                  <Input
                    id="interestedCity"
                    placeholder="Enter city name"
                    value={formData.interestedCity}
                    onChange={(e) => setFormData({ ...formData, interestedCity: e.target.value })}
                    className="bg-slate-800/50 border-slate-600/50 text-white placeholder:text-slate-500 focus:border-amber-500/50 focus:ring-amber-500/20"
                    required
                  />
                </div>
                <div>
                  <Label htmlFor="pincode" className="flex items-center gap-2 text-slate-200 mb-3">
                    <span className="text-amber-400">📮</span>
                    Pincode <span className="text-amber-500">*</span>
                  </Label>
                  <Input
                    id="pincode"
                    type="text"
                    placeholder="Enter pincode"
                    value={formData.pincode}
                    onChange={(e) => setFormData({ ...formData, pincode: e.target.value })}
                    className="bg-slate-800/50 border-slate-600/50 text-white placeholder:text-slate-500 focus:border-amber-500/50 focus:ring-amber-500/20"
                    required
                  />
                </div>
              </div>

              {/* Education & Company Name */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <Label htmlFor="education" className="flex items-center gap-2 text-slate-200 mb-3">
                    <span className="text-amber-400">🎓</span>
                    Education Qualification <span className="text-amber-500">*</span>
                  </Label>
                  <Select value={formData.education} onValueChange={(value) => setFormData({ ...formData, education: value })}>
                    <SelectTrigger className="bg-slate-800/50 border-slate-600/50 text-white focus:border-amber-500/50 focus:ring-amber-500/20">
                      <SelectValue placeholder="Select qualification" />
                    </SelectTrigger>
                    <SelectContent className="bg-slate-800 border-slate-700 text-white">
                      <SelectItem value="high-school">High School</SelectItem>
                      <SelectItem value="diploma">Diploma</SelectItem>
                      <SelectItem value="bachelors">Bachelor's Degree</SelectItem>
                      <SelectItem value="masters">Master's Degree</SelectItem>
                      <SelectItem value="doctorate">Doctorate</SelectItem>
                      <SelectItem value="other">Other</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div>
                  <Label htmlFor="companyName" className="flex items-center gap-2 text-slate-200 mb-3">
                    <span className="text-amber-400">🏢</span>
                    Company Name <span className="text-amber-500">*</span>
                  </Label>
                  <Input
                    id="companyName"
                    placeholder="Enter company name"
                    value={formData.companyName}
                    onChange={(e) => setFormData({ ...formData, companyName: e.target.value })}
                    className="bg-slate-800/50 border-slate-600/50 text-white placeholder:text-slate-500 focus:border-amber-500/50 focus:ring-amber-500/20"
                    required
                  />
                </div>
              </div>

              {/* Source */}
              <div>
                <Label htmlFor="source" className="flex items-center gap-2 text-slate-200 mb-3">
                  <span className="text-amber-400">📢</span>
                  How did you hear about us? <span className="text-amber-500">*</span>
                </Label>
                <Select value={formData.source} onValueChange={(value) => setFormData({ ...formData, source: value })}>
                  <SelectTrigger className="bg-slate-800/50 border-slate-600/50 text-white focus:border-amber-500/50 focus:ring-amber-500/20">
                    <SelectValue placeholder="Select source" />
                  </SelectTrigger>
                  <SelectContent className="bg-slate-800 border-slate-700 text-white">
                    <SelectItem value="existing-dealer">Existing RE Dealer</SelectItem>
                    <SelectItem value="customer">Customer</SelectItem>
                    <SelectItem value="re-employee">RE Employee</SelectItem>
                    <SelectItem value="newspaper">Newspaper</SelectItem>
                    <SelectItem value="website">Website</SelectItem>
                    <SelectItem value="friend">Friend</SelectItem>
                    <SelectItem value="other">Other</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              {/* Do you own a Royal Enfield? */}
              <div>
                <Label className="flex items-center gap-2 text-slate-200 mb-4">
                  <span className="text-amber-400">🏍️</span>
                  Do you own a Royal Enfield? <span className="text-amber-500">*</span>
                </Label>
                <RadioGroup value={formData.ownRoyalEnfield} onValueChange={(value) => setFormData({ ...formData, ownRoyalEnfield: value, royalEnfieldModel: value === 'no' ? '' : formData.royalEnfieldModel })}>
                  <div className="flex items-center space-x-8">
                    <div className="flex items-center space-x-3">
                      <RadioGroupItem value="yes" id="own-yes" className="border-amber-400/60 hover:border-amber-400 data-[state=checked]:border-amber-500 data-[state=checked]:bg-amber-500/20" />
                      <Label htmlFor="own-yes" className="cursor-pointer text-slate-200 hover:text-amber-300">Yes</Label>
                    </div>
                    <div className="flex items-center space-x-3">
                      <RadioGroupItem value="no" id="own-no" className="border-amber-400/60 hover:border-amber-400 data-[state=checked]:border-amber-500 data-[state=checked]:bg-amber-500/20" />
                      <Label htmlFor="no" className="cursor-pointer text-slate-200 hover:text-amber-300">No</Label>
                    </div>
                  </div>
                </RadioGroup>
              </div>

              {/* Royal Enfield Model - Conditional */}
              {formData.ownRoyalEnfield === 'yes' && (
                <div className="animate-in fade-in slide-in-from-top-2 duration-300">
                  <Label htmlFor="royalEnfieldModel" className="flex items-center gap-2 text-slate-200 mb-3">
                    <span className="text-amber-400">🏍️</span>
                    Which Royal Enfield model do you own? <span className="text-amber-500">*</span>
                  </Label>
                  <Select value={formData.royalEnfieldModel} onValueChange={(value) => setFormData({ ...formData, royalEnfieldModel: value })}>
                    <SelectTrigger className="bg-slate-800/50 border-slate-600/50 text-white focus:border-amber-500/50 focus:ring-amber-500/20">
                      <SelectValue placeholder="Select your bike model" />
                    </SelectTrigger>
                    <SelectContent className="bg-slate-800 border-slate-700 text-white">
                      <SelectItem value="classic-350">Classic 350</SelectItem>
                      <SelectItem value="meteor-350">Meteor 350</SelectItem>
                      <SelectItem value="hunter-350">Hunter 350</SelectItem>
                      <SelectItem value="bullet-350">Bullet 350</SelectItem>
                      <SelectItem value="himalayan">Himalayan</SelectItem>
                      <SelectItem value="scram-411">Scram 411</SelectItem>
                      <SelectItem value="interceptor-650">Interceptor 650</SelectItem>
                      <SelectItem value="continental-gt-650">Continental GT 650</SelectItem>
                      <SelectItem value="super-meteor-650">Super Meteor 650</SelectItem>
                      <SelectItem value="shotgun-650">Shotgun 650</SelectItem>
                      <SelectItem value="himalayan-450">Himalayan 450</SelectItem>
                      <SelectItem value="other">Other</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              )}

              {/* Existing Dealer/Vendor */}
              <div>
                <Label className="flex items-center gap-2 text-slate-200 mb-4">
                  <span className="text-amber-400">🏪</span>
                  Are you an existing dealer/vendor of Royal Enfield? <span className="text-amber-500">*</span>
                </Label>
                <RadioGroup value={formData.existingDealer} onValueChange={(value) => setFormData({ ...formData, existingDealer: value })}>
                  <div className="flex items-center space-x-8">
                    <div className="flex items-center space-x-3">
                      <RadioGroupItem value="yes" id="dealer-yes" className="border-amber-400/60 hover:border-amber-400 data-[state=checked]:border-amber-500 data-[state=checked]:bg-amber-500/20" />
                      <Label htmlFor="dealer-yes" className="cursor-pointer text-slate-200 hover:text-amber-300">Yes</Label>
                    </div>
                    <div className="flex items-center space-x-3">
                      <RadioGroupItem value="no" id="dealer-no" className="border-amber-400/60 hover:border-amber-400 data-[state=checked]:border-amber-500 data-[state=checked]:bg-amber-500/20" />
                      <Label htmlFor="dealer-no" className="cursor-pointer text-slate-200 hover:text-amber-300">No</Label>
                    </div>
                  </div>
                </RadioGroup>
              </div>

              {/* Address */}
              <div>
                <Label htmlFor="address" className="flex items-center gap-2 text-slate-200 mb-3">
                  <span className="text-amber-400">🏠</span>
                  Address <span className="text-amber-500">*</span>
                </Label>
                <Textarea
                  id="address"
                  placeholder="Enter your complete address including landmarks"
                  value={formData.address}
                  onChange={(e) => setFormData({ ...formData, address: e.target.value })}
                  className="bg-slate-800/50 border-slate-600/50 text-white placeholder:text-slate-500 focus:border-amber-500/50 focus:ring-amber-500/20"
                  rows={3}
                  required
                />
              </div>

              {/* Description */}
              <div>
                <Label htmlFor="description" className="flex items-center gap-2 text-slate-200 mb-3">
                  <span className="text-amber-400">📝</span>
                  Description <span className="text-amber-500">*</span>
                </Label>
                <Textarea
                  id="description"
                  placeholder="Tell us about your business background, experience, and why you want to become a Royal Enfield dealer..."
                  value={formData.description}
                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                  className="bg-slate-800/50 border-slate-600/50 text-white placeholder:text-slate-500 focus:border-amber-500/50 focus:ring-amber-500/20"
                  rows={5}
                  required
                />
              </div>

              {/* Terms and Conditions */}
              <div className="flex items-start space-x-3 bg-slate-800/30 p-5 rounded-xl border border-slate-700/50">
                <Checkbox
                  id="terms"
                  checked={formData.acceptTerms}
                  onCheckedChange={(checked) => setFormData({ ...formData, acceptTerms: checked as boolean })}
                  className="border-slate-600 data-[state=checked]:bg-amber-500 data-[state=checked]:border-amber-500 mt-0.5"
                />
                <div className="flex-1">
                  <Label htmlFor="terms" className="cursor-pointer text-slate-200">
                    I accept the terms and conditions <span className="text-amber-500">*</span>
                  </Label>
                  <p className="text-slate-400 text-xs mt-2 leading-relaxed">
                    By submitting this form, you agree to our privacy policy and terms of service.
                    We will use your information to process your dealership application.
                  </p>
                </div>
              </div>

              {/* Submit Button */}
              <Button
                type="submit"
                className="w-full bg-gradient-to-r from-amber-500 to-orange-600 hover:from-amber-600 hover:to-orange-700 text-white py-6 text-lg shadow-xl shadow-amber-500/20 hover:shadow-2xl hover:shadow-amber-500/30 transition-all duration-300"
              >
                Submit Application
              </Button>
            </div>
          </form>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-black/90 backdrop-blur-md border-t border-slate-800 py-16">
        <div className="max-w-7xl mx-auto px-6">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-12">
            {/* About Section */}
            <div>
              <div className="w-12 h-12 bg-gradient-to-br from-amber-500 to-orange-600 rounded-lg flex items-center justify-center shadow-lg mb-6">
                <span className="text-white text-xl">RE</span>
              </div>
              <p className="text-slate-400 text-sm leading-relaxed mb-4">
                Since 1901, Royal Enfield has been the world's oldest motorcycle brand in continuous production,
                creating timeless motorcycles that define the pure motorcycling experience.
              </p>
            </div>

            {/* Quick Links */}
            <div>
              <h3 className="text-white mb-6">Quick Links</h3>
              <ul className="space-y-3 text-sm">
                <li><a href="#" className="text-slate-400 hover:text-amber-400 transition-colors">About Royal Enfield</a></li>
                <li><a href="#" className="text-slate-400 hover:text-amber-400 transition-colors">Our Motorcycles</a></li>
                <li><a href="#" className="text-slate-400 hover:text-amber-400 transition-colors">Service & Support</a></li>
                <li><a href="#" className="text-slate-400 hover:text-amber-400 transition-colors">Contact Us</a></li>
              </ul>
            </div>

            {/* Dealership & Contact */}
            <div>
              <h3 className="text-white mb-6">Dealership Support</h3>
              <ul className="space-y-3 text-sm mb-8">
                <li><a href="#" className="text-slate-400 hover:text-amber-400 transition-colors">Application Process</a></li>
                <li><a href="#" className="text-slate-400 hover:text-amber-400 transition-colors">Partnership Requirements</a></li>
                <li><a href="#" className="text-slate-400 hover:text-amber-400 transition-colors">Training & Support</a></li>
                <li><a href="#" className="text-slate-400 hover:text-amber-400 transition-colors">FAQs</a></li>
              </ul>
              <div className="space-y-2 text-sm">
                <p className="text-slate-400">Email: <span className="text-amber-400">dealership@royalenfield.com</span></p>
                <p className="text-slate-400">Phone: <span className="text-amber-400">+91 1800-123-7567</span></p>
                <p className="text-slate-500">Mon-Fri, 9:00 AM - 6:00 PM IST</p>
              </div>
            </div>
          </div>

          <div className="border-t border-slate-800 mt-12 pt-8 text-center">
            <p className="text-slate-500 text-sm">
              © 2024 Royal Enfield. All rights reserved. | Made like a gun, goes like a bullet.
            </p>
          </div>
        </div>
      </footer>
    </div>
  );
}