import React, { useState } from 'react';
import { Button } from './ui/button';
import { Input } from './ui/input';
import { Label } from './ui/label';
import { Card, CardContent } from './ui/card';
import { Checkbox } from './ui/checkbox';
import { 
  Users, 
  BarChart3, 
  Settings, 
  ArrowRight, 
  Eye, 
  EyeOff,
  Building2,
  Globe,
  User,
  Mail,
  Lock,
  Phone,
  BookOpen,
  Target,
  Award
} from 'lucide-react';
import { navigateTo } from './Router';

export function CorporateSignUp() {
  const [formData, setFormData] = useState({
    organisationName: '',
    officialDomain: '',
    contactName: '',
    workEmail: '',
    password: '',
    phoneNumber: ''
  });
  const [showPassword, setShowPassword] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

  const handleInputChange = (field: string, value: string) => {
    setFormData(prev => ({ ...prev, [field]: value }));
  };

  const handleSignUp = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    
    // Simulate registration
    setTimeout(() => {
      setIsLoading(false);
      // Navigate to dashboard or success page
      navigateTo('/dashboard');
    }, 2000);
  };

  const transformationFeatures = [
    {
      icon: BookOpen,
      title: 'World-Class Content',
      description: 'Access premium leadership courses from industry experts'
    },
    {
      icon: Users,
      title: 'Global Community',
      description: 'Join 25,000+ leaders from top organizations worldwide'
    },
    {
      icon: Award,
      title: 'Recognized Credentials',
      description: 'Earn certificates valued by Fortune 500 companies'
    },
    {
      icon: Target,
      title: 'Personalized Path',
      description: 'Get customized learning recommendations based on your goals'
    }
  ];

  const corporateFeatures = [
    {
      icon: Users,
      title: 'Team Management',
      description: 'Centralized dashboard to manage multiple learner accounts and progress tracking'
    },
    {
      icon: BarChart3,
      title: 'Advanced Analytics',
      description: 'Comprehensive reporting and insights on team learning outcomes and ROI'
    },
    {
      icon: Settings,
      title: 'Custom Solutions',
      description: 'Tailored programs designed specifically for your organization\'s goals'
    }
  ];

  return (
    <div style={{ backgroundColor: '#FFFFFF' }}>
      {/* Main Content */}
      <div className="section-margin-x py-16">
        <div className="max-w-6xl mx-auto">
          
          {/* Header Section */}
          <div className="text-center mb-12">
            <div className="mb-6">
              <span 
                className="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium"
                style={{
                  backgroundColor: 'rgba(248, 195, 1, 0.15)',
                  color: 'var(--color-black)',
                  fontFamily: 'var(--font-family-base)'
                }}
              >
                <Building2 className="w-4 h-4" />
                Corporate Registration
              </span>
            </div>
            
            <h1 
              className="mb-6"
              style={{
                fontSize: 'var(--font-h2)',
                fontWeight: 'var(--font-weight-h2)',
                lineHeight: 'var(--line-height-h2)',
                color: 'var(--color-black)',
                fontFamily: 'var(--font-family-base)'
              }}
            >
              Transform Your Organization's Leadership
            </h1>
            
            <p 
              className="mb-12 max-w-2xl mx-auto"
              style={{
                fontSize: 'var(--font-body-lg)',
                color: 'var(--color-gray-muted)',
                fontFamily: 'var(--font-family-base)',
                lineHeight: 'var(--line-height-body-lg)'
              }}
            >
              Join thousands of organizations worldwide who trust KLC to develop their leaders. 
              Get started with enterprise-grade learning solutions and dedicated support.
            </p>
          </div>

          {/* Two Column Layout */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
            
            {/* Left Column - Content */}
            <div>
              {/* Leadership Transformation Section */}
              <div className="mb-12">
                <div className="mb-6">
                  <span 
                    className="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium"
                    style={{
                      backgroundColor: 'rgba(248, 195, 1, 0.15)',
                      color: 'var(--color-black)',
                      fontFamily: 'var(--font-family-base)'
                    }}
                  >
                    ⭐ Join KLC Community
                  </span>
                </div>
                
                <h2 
                  className="mb-4"
                  style={{
                    fontSize: 'var(--font-h3)',
                    fontWeight: 'var(--font-weight-h3)',
                    color: 'var(--color-black)',
                    fontFamily: 'var(--font-family-base)'
                  }}
                >
                  Start Your Leadership Transformation
                </h2>
                
                <p 
                  className="mb-8"
                  style={{
                    fontSize: 'var(--font-body)',
                    color: 'var(--color-gray-muted)',
                    fontFamily: 'var(--font-family-base)',
                    lineHeight: 'var(--line-height-body)'
                  }}
                >
                  Join thousands of professionals who have accelerated their careers through KLC's 
                  proven leadership development programs. Your journey to becoming an exceptional leader starts here.
                </p>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  {transformationFeatures.map((feature, index) => (
                    <div key={index} className="flex items-start gap-3">
                      <div 
                        className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0"
                        style={{ backgroundColor: 'var(--color-primary)' }}
                      >
                        <feature.icon className="w-4 h-4 text-white" />
                      </div>
                      <div className="flex-1">
                        <h3 
                          className="font-medium mb-1"
                          style={{
                            fontSize: 'var(--font-small)',
                            color: 'var(--color-black)',
                            fontFamily: 'var(--font-family-base)'
                          }}
                        >
                          {feature.title}
                        </h3>
                        <p 
                          style={{
                            fontSize: '0.75rem',
                            color: 'var(--color-gray-muted)',
                            fontFamily: 'var(--font-family-base)',
                            lineHeight: '1.3'
                          }}
                        >
                          {feature.description}
                        </p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              {/* What You'll Get with Corporate Access */}
              <div>
                <h2 
                  className="mb-8"
                  style={{
                    fontSize: 'var(--font-h4)',
                    fontWeight: 'var(--font-weight-h4)',
                    color: 'var(--color-black)',
                    fontFamily: 'var(--font-family-base)'
                  }}
                >
                  What You'll Get with Corporate Access
                </h2>

                <div className="space-y-6">
                  {corporateFeatures.map((feature, index) => (
                    <div key={index} className="flex items-start gap-4">
                      <div 
                        className="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0"
                        style={{ backgroundColor: 'var(--color-primary)' }}
                      >
                        <feature.icon className="w-6 h-6 text-white" />
                      </div>
                      <div className="flex-1">
                        <h3 
                          className="font-medium mb-2"
                          style={{
                            fontSize: 'var(--font-body)',
                            color: 'var(--color-black)',
                            fontFamily: 'var(--font-family-base)'
                          }}
                        >
                          {feature.title}
                        </h3>
                        <p 
                          style={{
                            fontSize: 'var(--font-small)',
                            color: 'var(--color-gray-muted)',
                            fontFamily: 'var(--font-family-base)',
                            lineHeight: 'var(--line-height-small)'
                          }}
                        >
                          {feature.description}
                        </p>
                      </div>
                    </div>
                  ))}
                </div>

                {/* Existing Customer Note */}
                <div 
                  className="mt-8 p-4 rounded-lg border"
                  style={{ backgroundColor: 'rgba(0, 0, 0, 0.02)' }}
                >
                  <p 
                    className="mb-2"
                    style={{
                      fontSize: 'var(--font-small)',
                      fontWeight: '500',
                      color: 'var(--color-black)',
                      fontFamily: 'var(--font-family-base)'
                    }}
                  >
                    Already have a corporate account?
                  </p>
                  <button
                    onClick={() => navigateTo('/corporate-login')}
                    className="text-blue-600 hover:text-blue-700 transition-colors"
                    style={{
                      fontSize: 'var(--font-small)',
                      fontFamily: 'var(--font-family-base)'
                    }}
                  >
                    Sign in to your dashboard
                  </button>
                </div>
              </div>
            </div>

            {/* Right Column - Sign Up Form */}
            <div>
              <Card className="shadow-lg border-0">
                <CardContent className="p-8">
                  
                  {/* Form Header */}
                  <div className="text-center mb-8">
                    <h2 
                      className="mb-2"
                      style={{
                        fontSize: 'var(--font-h4)',
                        fontWeight: 'var(--font-weight-h4)',
                        color: 'var(--color-black)',
                        fontFamily: 'var(--font-family-base)'
                      }}
                    >
                      Create Your KLC HR Account
                    </h2>
                    <p 
                      style={{
                        fontSize: 'var(--font-small)',
                        color: 'var(--color-gray-muted)',
                        fontFamily: 'var(--font-family-base)'
                      }}
                    >
                      Get started with KLC's corporate leadership development programs
                    </p>
                  </div>

                  {/* Sign Up Form */}
                  <form onSubmit={handleSignUp} className="space-y-6">
                    
                    {/* Organisation Name */}
                    <div>
                      <Label 
                        htmlFor="organisationName"
                        style={{
                          fontSize: 'var(--font-body)',
                          fontWeight: '500',
                          color: 'var(--color-black)',
                          fontFamily: 'var(--font-family-base)'
                        }}
                      >
                        Organisation Name *
                      </Label>
                      <div className="relative mt-2">
                        <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">
                          <Building2 className="w-5 h-5" />
                        </div>
                        <Input
                          id="organisationName"
                          type="text"
                          value={formData.organisationName}
                          onChange={(e) => handleInputChange('organisationName', e.target.value)}
                          placeholder="Your Company Name"
                          required
                          className="h-12 pl-12"
                          style={{
                            fontSize: 'var(--font-body)',
                            fontFamily: 'var(--font-family-base)',
                            backgroundColor: '#F3F3F5'
                          }}
                        />
                      </div>
                    </div>

                    {/* Official Domain */}
                    <div>
                      <Label 
                        htmlFor="officialDomain"
                        style={{
                          fontSize: 'var(--font-body)',
                          fontWeight: '500',
                          color: 'var(--color-black)',
                          fontFamily: 'var(--font-family-base)'
                        }}
                      >
                        Official Domain *
                      </Label>
                      <div className="relative mt-2">
                        <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">
                          <Globe className="w-5 h-5" />
                        </div>
                        <Input
                          id="officialDomain"
                          type="text"
                          value={formData.officialDomain}
                          onChange={(e) => handleInputChange('officialDomain', e.target.value)}
                          placeholder="company.com"
                          required
                          className="h-12 pl-12"
                          style={{
                            fontSize: 'var(--font-body)',
                            fontFamily: 'var(--font-family-base)',
                            backgroundColor: '#F3F3F5'
                          }}
                        />
                      </div>
                    </div>

                    {/* Contact Name */}
                    <div>
                      <Label 
                        htmlFor="contactName"
                        style={{
                          fontSize: 'var(--font-body)',
                          fontWeight: '500',
                          color: 'var(--color-black)',
                          fontFamily: 'var(--font-family-base)'
                        }}
                      >
                        Contact Name *
                      </Label>
                      <div className="relative mt-2">
                        <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">
                          <User className="w-5 h-5" />
                        </div>
                        <Input
                          id="contactName"
                          type="text"
                          value={formData.contactName}
                          onChange={(e) => handleInputChange('contactName', e.target.value)}
                          placeholder="Your full name"
                          required
                          className="h-12 pl-12"
                          style={{
                            fontSize: 'var(--font-body)',
                            fontFamily: 'var(--font-family-base)',
                            backgroundColor: '#F3F3F5'
                          }}
                        />
                      </div>
                    </div>

                    {/* Work Email */}
                    <div>
                      <Label 
                        htmlFor="workEmail"
                        style={{
                          fontSize: 'var(--font-body)',
                          fontWeight: '500',
                          color: 'var(--color-black)',
                          fontFamily: 'var(--font-family-base)'
                        }}
                      >
                        Work Email *
                      </Label>
                      <div className="relative mt-2">
                        <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">
                          <Mail className="w-5 h-5" />
                        </div>
                        <Input
                          id="workEmail"
                          type="email"
                          value={formData.workEmail}
                          onChange={(e) => handleInputChange('workEmail', e.target.value)}
                          placeholder="you@company.com"
                          required
                          className="h-12 pl-12"
                          style={{
                            fontSize: 'var(--font-body)',
                            fontFamily: 'var(--font-family-base)',
                            backgroundColor: '#F3F3F5'
                          }}
                        />
                      </div>
                    </div>

                    {/* Password */}
                    <div>
                      <Label 
                        htmlFor="password"
                        style={{
                          fontSize: 'var(--font-body)',
                          fontWeight: '500',
                          color: 'var(--color-black)',
                          fontFamily: 'var(--font-family-base)'
                        }}
                      >
                        Password *
                      </Label>
                      <div className="relative mt-2">
                        <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">
                          <Lock className="w-5 h-5" />
                        </div>
                        <Input
                          id="password"
                          type={showPassword ? 'text' : 'password'}
                          value={formData.password}
                          onChange={(e) => handleInputChange('password', e.target.value)}
                          placeholder="Create a strong password"
                          required
                          className="h-12 pl-12 pr-12"
                          style={{
                            fontSize: 'var(--font-body)',
                            fontFamily: 'var(--font-family-base)',
                            backgroundColor: '#F3F3F5'
                          }}
                        />
                        <button
                          type="button"
                          onClick={() => setShowPassword(!showPassword)}
                          className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700"
                        >
                          {showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
                        </button>
                      </div>
                    </div>

                    {/* Phone Number (Optional) */}
                    <div>
                      <Label 
                        htmlFor="phoneNumber"
                        style={{
                          fontSize: 'var(--font-body)',
                          fontWeight: '500',
                          color: 'var(--color-black)',
                          fontFamily: 'var(--font-family-base)'
                        }}
                      >
                        Phone Number (Optional)
                      </Label>
                      <div className="relative mt-2">
                        <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">
                          <Phone className="w-5 h-5" />
                        </div>
                        <Input
                          id="phoneNumber"
                          type="tel"
                          value={formData.phoneNumber}
                          onChange={(e) => handleInputChange('phoneNumber', e.target.value)}
                          placeholder="+1 234 567 8900"
                          className="h-12 pl-12"
                          style={{
                            fontSize: 'var(--font-body)',
                            fontFamily: 'var(--font-family-base)',
                            backgroundColor: '#F3F3F5'
                          }}
                        />
                      </div>
                    </div>

                    {/* Create Account Button */}
                    <Button
                      type="submit"
                      disabled={isLoading}
                      className="w-full h-14 text-white font-medium flex items-center justify-center gap-2"
                      style={{
                        backgroundColor: 'var(--color-primary)',
                        fontSize: 'var(--font-body)',
                        fontFamily: 'var(--font-family-base)',
                        borderRadius: '10px'
                      }}
                    >
                      {isLoading ? (
                        <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
                      ) : (
                        <>
                          Create Account
                          <ArrowRight className="w-5 h-5" />
                        </>
                      )}
                    </Button>
                  </form>

                  {/* Terms Text */}
                  <div className="text-center mt-6">
                    <p 
                      style={{
                        fontSize: 'var(--font-small)',
                        color: 'var(--color-gray-muted)',
                        fontFamily: 'var(--font-family-base)',
                        lineHeight: 'var(--line-height-small)'
                      }}
                    >
                      By creating an account, you agree to our{' '}
                      <span className="text-blue-600 hover:text-blue-700 cursor-pointer">
                        Corporate Terms
                      </span>{' '}
                      and{' '}
                      <span className="text-blue-600 hover:text-blue-700 cursor-pointer">
                        Privacy Policy
                      </span>
                    </p>
                  </div>

                  {/* Sign In Link */}
                  <div className="text-center mt-6">
                    <button
                      onClick={() => navigateTo('/corporate-login')}
                      className="text-blue-600 hover:text-blue-700 transition-colors"
                      style={{
                        fontSize: 'var(--font-small)',
                        fontFamily: 'var(--font-family-base)'
                      }}
                    >
                      Already have an account? Sign in instead
                    </button>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </div>

      {/* Need Help Section - Separate Section Below */}
      <div 
        className="section-margin-x py-12"
        style={{ backgroundColor: 'rgba(0, 0, 0, 0.02)' }}
      >
        <div className="max-w-4xl mx-auto text-center">
          <h3 
            className="mb-4"
            style={{
              fontSize: 'var(--font-h4)',
              fontWeight: 'var(--font-weight-h4)',
              color: 'var(--color-black)',
              fontFamily: 'var(--font-family-base)'
            }}
          >
            Need Help Getting Started?
          </h3>
          <p 
            className="mb-6"
            style={{
              fontSize: 'var(--font-body)',
              color: 'var(--color-gray-muted)',
              fontFamily: 'var(--font-family-base)',
              lineHeight: 'var(--line-height-body)'
            }}
          >
            Our team is ready to help you set up your corporate learning program and answer any questions about our enterprise solutions.
          </p>
          <Button
            variant="outline"
            className="border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white"
            style={{
              fontSize: 'var(--font-body)',
              fontFamily: 'var(--font-family-base)',
              fontWeight: '500',
              padding: '0.75rem 2rem',
              borderRadius: '10px'
            }}
          >
            Contact Sales Team
          </Button>
        </div>
      </div>
    </div>
  );
}