import { Card, CardContent } from '../components/ui/card';
import { Button } from '../components/ui/button';
import { Input } from '../components/ui/input';
import { Textarea } from '../components/ui/textarea';
import { Label } from '../components/ui/label';
import { 
  MapPin, 
  Phone, 
  Mail, 
  Clock, 
  Calendar,
  Navigation,
  Shield,
  Award
} from 'lucide-react';





function Contact() {

   

  

const contactInfo = [
    {
      icon: MapPin,
      title: 'Visit Our Clinic',
      details: [
        'Vetro Medica Complex,',
        'Al-Mutanabbi St. 67, Amman',
      ],
      action: 'Get Directions',
      link: 'https://maps.app.goo.gl/tsFC4Mnsxay4dGEb7'
    },
    {
      icon: Phone,
      title: 'Call Us Today',
      details: [
        'Main: (06) 460 1818',
      ],
      action: 'Call Now',
      link: 'tel:+962064601818',
    },
    {
      icon: Mail,
      title: 'Email Us',
      details: [
        'info@hearex.com',
      ],
      action: 'Send Email',
      link: 'mailto:info@hearex.com'
    }
  ];



  return (
    <section className="py-16 lg:py-24 bg-[#f8f9fa]">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section Header */}
        <div className="text-center mb-16">
          <h2 className="text-3xl lg:text-4xl font-bold text-[#383838] mb-4">
            Contact HEAREX Audiology Clinic
          </h2>
          {/* <p className="text-lg text-gray-600 max-w-2xl mx-auto">
            Take the first step toward better hearing health. Contact our experienced team today to book your comprehensive hearing evaluation.
          </p> */}
        </div>

        {/* Main Content Grid */}
        <div className="grid lg:grid-cols-2 gap-12">
          {/* Contact Information */}
          <div className="space-y-8">
            <div className="grid gap-6">
              {contactInfo.map((info, index) => {
                const IconComponent = info.icon;
                return (
                  <Card key={index} className="bg-white shadow-lg shadow-[#8ac642]/10 border-0 hover:shadow-xl hover:shadow-[#8ac642]/20 transition-all duration-300">
                    <CardContent className="p-6">
                      <div className="flex items-start space-x-4">
                        <div className="flex-shrink-0 w-12 h-12 bg-[#8ac642] rounded-lg flex items-center justify-center">
                          <IconComponent className="w-6 h-6 text-white" />
                        </div>
                        <div className="flex-1">
                          <h3 className="text-lg font-semibold text-[#383838] mb-2">
                            {info.title}
                          </h3>
                          <div className="space-y-1 mb-4">
                            {info.details.map((detail, detailIndex) => (
                              <p key={detailIndex} className="text-gray-600">
                                {detail}
                              </p>
                            ))}
                          </div>
                          <Button 
                            onClick={() => window.open(info.link, '_blank')}
                            variant="outline" 
                            size="sm"
                            className="border-[#8ac642] text-[#8ac642] hover:bg-[#8ac642] hover:text-[#8ac642]"
                          >
                            {info.action}
                          </Button>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                );
              })}
            </div>

            
          </div>

          {/* Contact Form */}
          <div>
            <Card className="bg-white shadow-xl shadow-[#8ac642]/20 border-0">
              <CardContent className="p-8">
                <div className="space-y-6">
                  <div className="text-center">
                    <Calendar className="w-12 h-12 text-[#8ac642] mx-auto mb-4" />
                    <h3 className="text-2xl font-bold text-[#383838] mb-2">
                      Contact US
                    </h3>
                    {/* <p className="text-gray-600">
                      Fill out this form and we'll contact you within 24 hours to schedule your visit.
                    </p> */}
                  </div>

                  <form className="space-y-4">
                    <div className="grid grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <Label htmlFor="firstName">First Name *</Label>
                        <Input 
                          id="firstName" 
                          placeholder="John"
                          className="border-gray-200 focus:ring-[#8ac642] focus:border-[#8ac642]"
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="lastName">Last Name *</Label>
                        <Input 
                          id="lastName" 
                          placeholder="Smith"
                          className="border-gray-200 focus:ring-[#8ac642] focus:border-[#8ac642]"
                        />
                      </div>
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="email">Email Address *</Label>
                      <Input 
                        id="email" 
                        type="email" 
                        placeholder="john.smith@email.com"
                        className="border-gray-200 focus:ring-[#8ac642] focus:border-[#8ac642]"
                      />
                    </div>

                    <div className="space-y-2">
                      <Label htmlFor="phone">Phone Number *</Label>
                      <Input 
                        id="phone" 
                        type="tel" 
                        placeholder="(555) 123-4567"
                        className="border-gray-200 focus:ring-[#8ac642] focus:border-[#8ac642]"
                      />
                    </div>

                    

                    <div className="space-y-2">
                      <Label htmlFor="message">Additional Message</Label>
                      <Textarea 
                        id="message" 
                        placeholder="Please share any specific concerns or questions you have about your hearing health..."
                        rows={4}
                        className="border-gray-200 focus:ring-[#8ac642] focus:border-[#8ac642]"
                      />
                    </div>


                    <Button 
                      type="submit"
                      className="w-full bg-[#8ac642] hover:bg-[#7ab536] text-white py-6 text-lg shadow-lg shadow-[#8ac642]/30 transition-all duration-300 hover:shadow-xl hover:shadow-[#8ac642]/40"
                    >
                        contact us
                    </Button>

                    <p className="text-center text-sm text-gray-500">
                      Or call us directly at <span className="text-[#8ac642] font-medium"><a href="tel:+962064601818">(06) 4601818</a></span>
                    </p>
                  </form>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>

       
      </div>
    </section>
  );

}

export default Contact;