import { FaCloudRain, FaMapMarkerAlt } from "react-icons/fa";

export default function Contact() {
  return (
    <section id="contact" className="py-20 md:py-28 bg-white">
      <div className="container mx-auto px-4">
        <h2 className="font-stick uppercase text-4xl md:text-5xl text-center text-flyer-black mb-16">
          Anfahrt
        </h2>
        <div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-8 items-stretch">
          <div className="bg-flyer-cream rounded-2xl shadow-xl p-8 border-2 border-flyer-black/10">
            <h3 className="flex items-center gap-3 text-xl md:text-2xl font-bold mb-6 text-flyer-black">
              <FaMapMarkerAlt className="text-flyer-yellow" /> Adresse
            </h3>
            <p className="text-lg font-bold">Steinbruch Friedberg</p>
            <p className="mt-1 text-flyer-black/80">Steinerstraße 253, 8240 Friedberg</p>
            <div className="mt-6 flex items-start gap-3 bg-flyer-yellow/30 rounded-lg px-4 py-3 text-sm">
              <FaCloudRain className="mt-0.5 shrink-0" />
              <span>Bei Schlechtwetter im Sportzentrum Friedberg</span>
            </div>
          </div>
          <div className="rounded-2xl overflow-hidden shadow-xl border-2 border-flyer-black/10 min-h-[300px]">
            <iframe
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3228.641194756047!2d16.055658899999997!3d47.448087799999996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x476e7d7cb5936f95%3A0xab5b000c861e595b!2sSteinbruch%20Friedberg!5e1!3m2!1sde!2sat!4v1751542474148!5m2!1sde!2sat"
              width="100%"
              height="100%"
              style={{ border: 0, minHeight: 300 }}
              allowFullScreen={true}
              loading="lazy"
            ></iframe>
          </div>
        </div>
      </div>
    </section>
  );
}
