
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { MapPin, Phone, Mail, Clock } from "lucide-react";

const ContactSection = () => {
  return (
    <section id="contact" className="py-16 bg-gray-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-12">
          <h2 className="text-3xl font-bold text-gray-900">Kontakt</h2>
          <p className="mt-4 text-xl text-gray-600">Wir freuen uns auf deine Nachricht</p>
        </div>

        <div className="grid md:grid-cols-2 gap-8 lg:gap-12">
          <div>
            <Card>
              <CardContent className="p-6">
                <form className="space-y-4">
                  <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <label htmlFor="firstName" className="text-sm font-medium">Vorname</label>
                      <Input id="firstName" placeholder="Dein Vorname" />
                    </div>
                    <div className="space-y-2">
                      <label htmlFor="lastName" className="text-sm font-medium">Nachname</label>
                      <Input id="lastName" placeholder="Dein Nachname" />
                    </div>
                  </div>
                  <div className="space-y-2">
                    <label htmlFor="email" className="text-sm font-medium">E-Mail</label>
                    <Input id="email" type="email" placeholder="deine@email.de" />
                  </div>
                  <div className="space-y-2">
                    <label htmlFor="subject" className="text-sm font-medium">Betreff</label>
                    <Input id="subject" placeholder="Worum geht es?" />
                  </div>
                  <div className="space-y-2">
                    <label htmlFor="message" className="text-sm font-medium">Nachricht</label>
                    <Textarea id="message" placeholder="Deine Nachricht an uns" rows={4} />
                  </div>
                  <Button className="w-full bg-frog-500 hover:bg-frog-600">Nachricht senden</Button>
                </form>
              </CardContent>
            </Card>
          </div>

          <div className="space-y-6">
            <div className="bg-white rounded-lg shadow p-6">
              <h3 className="text-xl font-bold mb-4">Kontaktinformationen</h3>
              <div className="space-y-4">
                <div className="flex items-start">
                  <MapPin className="h-5 w-5 text-frog-500 mt-1 mr-3" />
                  <div>
                    <p className="font-medium">Adresse</p>
                    <p className="text-gray-600">TG Laudenbach<br />Eleker Straße 3<br />69514 Laudenbach</p>
                  </div>
                </div>
                <div className="flex items-start">
                  <Phone className="h-5 w-5 text-frog-500 mt-1 mr-3" />
                  <div>
                    <p className="font-medium">Telefon</p>
                    <p className="text-gray-600">+49 6201 7835919</p>
                  </div>
                </div>
                <div className="flex items-start">
                  <Mail className="h-5 w-5 text-frog-500 mt-1 mr-3" />
                  <div>
                    <p className="font-medium">E-Mail</p>
                    <p className="text-gray-600">info@tg-laudenbach-volleyball.de</p>
                  </div>
                </div>
              </div>
            </div>

            <div className="bg-white rounded-lg shadow overflow-hidden">
              <iframe 
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2585.923358188726!2d8.63338731565!3d49.58872697936459!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4797ca97ea4a7e55%3A0x4e3bd89fc8fa7adc!2sLaudenbach%2C%20Germany!5e0!3m2!1sen!2sus!4v1644950297175!5m2!1sen!2sus" 
                width="100%" 
                height="250" 
                style={{ border: 0 }} 
                allowFullScreen={false} 
                loading="lazy"
                title="Google Maps Standort TG Laudenbach"
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default ContactSection;
