KLC-Learners-Portal-Frontend-Figmamake/src/pages/Contact.tsx

import React, { useState } from 'react';
import { Button } from '../components/ui/button';
import { Input } from '../components/ui/input';
import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card';
import { ArrowLeft, Mail, Phone, MapPin, Clock, Send } from 'lucide-react';
 const navigate = useNavigate();

export function Contact() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    subject: '',
    message: ''
  });
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    
    try {
      // Simulate form submission
      await new Promise(resolve => setTimeout(resolve, 1000));
      alert('Thank you for your message! We\'ll get back to you within 24 hours.');
      setFormData({ name: '', email: '', subject: '', message: '' });
    } catch (error) {
      console.error('Form submission failed:', error);
    } finally {
      setIsLoading(false);
    }
  };

  const handleBackNavigation = () => {
    navigate('/');
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-white">
      {/* Header Section */}
      <div className="bg-primary text-primary-foreground pt-24 pb-12">
        <div className="container mx-auto px-4 lg:px-8">
          <div className="max-w-4xl mx-auto">
            <div className="flex items-start gap-4">
              <Button
                variant="ghost"
                size="icon"
                onClick={handleBackNavigation}
                className="text-primary-foreground hover:bg-primary-foreground/10 min-h-[44px] min-w-[44px] mt-1"
                aria-label="Go back to home page"
              >
                <ArrowLeft className="h-6 w-6" />
              </Button>
              <div className="flex-1">
                <h1 className="text-[36px] mb-3 font-bold">Contact Us</h1>
                <p className="text-[18px] text-primary-foreground/90 leading-relaxed">
                  Get in touch with our team for support, inquiries, or to learn more about our leadership programs.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Main Content */}
      <div className="container mx-auto px-4 lg:px-8 -mt-8">
        <div className="max-w-6xl mx-auto">
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            
            {/* Contact Form */}
            <div className="lg:col-span-2">
              <Card className="bg-white shadow-xl border-0">
                <CardHeader className="pb-6">
                  <CardTitle className="text-[24px] font-bold text-gray-900">
                    Send us a Message
                  </CardTitle>
                  <p className="text-[16px] text-gray-600">
                    We'd love to hear from you. Fill out the form below and we'll get back to you as soon as possible.
                  </p>
                </CardHeader>
                
                <CardContent>
                  <form onSubmit={handleSubmit} className="space-y-6">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                      <div>
                        <label htmlFor="name" className="block text-[16px] font-medium text-gray-900 mb-2">
                          Full Name
                        </label>
                        <Input
                          id="name"
                          type="text"
                          value={formData.name}
                          onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
                          className="text-[16px] min-h-[44px]"
                          placeholder="Your full name"
                          required
                        />
                      </div>

                      <div>
                        <label htmlFor="email" className="block text-[16px] font-medium text-gray-900 mb-2">
                          Email Address
                        </label>
                        <Input
                          id="email"
                          type="email"
                          value={formData.email}
                          onChange={(e) => setFormData(prev => ({ ...prev, email: e.target.value }))}
                          className="text-[16px] min-h-[44px]"
                          placeholder="your@email.com"
                          required
                        />
                      </div>
                    </div>

                    <div>
                      <label htmlFor="subject" className="block text-[16px] font-medium text-gray-900 mb-2">
                        Subject
                      </label>
                      <Input
                        id="subject"
                        type="text"
                        value={formData.subject}
                        onChange={(e) => setFormData(prev => ({ ...prev, subject: e.target.value }))}
                        className="text-[16px] min-h-[44px]"
                        placeholder="What can we help you with?"
                        required
                      />
                    </div>

                    <div>
                      <label htmlFor="message" className="block text-[16px] font-medium text-gray-900 mb-2">
                        Message
                      </label>
                      <textarea
                        id="message"
                        value={formData.message}
                        onChange={(e) => setFormData(prev => ({ ...prev, message: e.target.value }))}
                        rows={6}
                        className="w-full px-4 py-3 text-[16px] border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent resize-none"
                        placeholder="Tell us more about your inquiry..."
                        required
                      />
                    </div>

                    <Button
                      type="submit"
                      disabled={isLoading}
                      className="w-full text-[16px] min-h-[48px] bg-primary hover:bg-primary/90"
                    >
                      <Send className="h-4 w-4 mr-2" />
                      {isLoading ? 'Sending Message...' : 'Send Message'}
                    </Button>
                  </form>
                </CardContent>
              </Card>
            </div>

            {/* Contact Information */}
            <div className="space-y-6">
              <Card className="bg-white shadow-xl border-0">
                <CardHeader>
                  <CardTitle className="text-[20px] font-bold text-gray-900">
                    Get in Touch
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-6">
                  <div className="flex items-start gap-4">
                    <div className="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
                      <Mail className="h-5 w-5 text-primary" />
                    </div>
                    <div>
                      <h3 className="text-[16px] font-semibold text-gray-900 mb-1">Email Us</h3>
                      <p className="text-[16px] text-gray-600">support@klc.edu</p>
                      <p className="text-[16px] text-gray-600">enterprise@klc.edu</p>
                    </div>
                  </div>

                  <div className="flex items-start gap-4">
                    <div className="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
                      <Phone className="h-5 w-5 text-primary" />
                    </div>
                    <div>
                      <h3 className="text-[16px] font-semibold text-gray-900 mb-1">Call Us</h3>
                      <p className="text-[16px] text-gray-600">+1 (555) 123-4567</p>
                      <p className="text-[14px] text-gray-500">Mon-Fri, 9 AM - 6 PM EST</p>
                    </div>
                  </div>

                  <div className="flex items-start gap-4">
                    <div className="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
                      <MapPin className="h-5 w-5 text-primary" />
                    </div>
                    <div>
                      <h3 className="text-[16px] font-semibold text-gray-900 mb-1">Visit Us</h3>
                      <p className="text-[16px] text-gray-600">
                        123 Leadership Way<br />
                        Suite 100<br />
                        Boston, MA 02101
                      </p>
                    </div>
                  </div>

                  <div className="flex items-start gap-4">
                    <div className="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
                      <Clock className="h-5 w-5 text-primary" />
                    </div>
                    <div>
                      <h3 className="text-[16px] font-semibold text-gray-900 mb-1">Business Hours</h3>
                      <p className="text-[16px] text-gray-600">
                        Monday - Friday: 9:00 AM - 6:00 PM<br />
                        Saturday: 10:00 AM - 4:00 PM<br />
                        Sunday: Closed
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>

              <Card className="bg-gradient-to-br from-primary to-primary/90 text-primary-foreground shadow-xl border-0">
                <CardContent className="p-6">
                  <h3 className="text-[18px] font-semibold mb-3">Need Immediate Help?</h3>
                  <p className="text-[16px] mb-4 opacity-90">
                    Our support team is standing by to assist you with any questions about our programs or platform.
                  </p>
                  <Button
                    variant="secondary"
                    className="w-full text-[16px] min-h-[44px] bg-white/10 hover:bg-white/20 text-white border-white/20"
                    onClick={() => window.open('mailto:support@klc.edu', '_blank')}
                  >
                    Email Support Now
                  </Button>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}