"use client";

import { MapPin, Phone, Mail, Clock } from "lucide-react";

export default function Contact({ dict }: { dict: any }) {
  return (
    <section id="contact" className="py-24 bg-sand-light text-sea-dark relative">
      <div className="container mx-auto px-6 max-w-7xl">
        <div className="text-center mb-16">
          <h2 className="text-sm font-bold tracking-widest uppercase text-coral mb-4">{dict.contact.title}</h2>
          <h3 className="text-4xl md:text-5xl font-serif">{dict.contact.heading}</h3>
        </div>

        <div className="grid lg:grid-cols-2 gap-12 items-start">
          
          {/* İletişim Bilgileri */}
          <div className="space-y-8">
            <div className="flex items-start gap-4">
              <div className="w-12 h-12 bg-white rounded-full flex items-center justify-center shrink-0 shadow-md">
                <MapPin className="text-coral w-6 h-6" />
              </div>
              <div>
                <h4 className="font-bold text-xl mb-2 font-serif">{dict.contact.address.title}</h4>
                <p className="text-gray-600 leading-relaxed">
                  {dict.contact.address.text1}<br />
                  {dict.contact.address.text2}
                </p>
              </div>
            </div>

            <div className="flex items-start gap-4">
              <div className="w-12 h-12 bg-white rounded-full flex items-center justify-center shrink-0 shadow-md">
                <Phone className="text-coral w-6 h-6" />
              </div>
              <div>
                <h4 className="font-bold text-xl mb-2 font-serif">{dict.contact.phone}</h4>
                <p className="text-gray-600">
                  <a href="tel:+905344656235" className="hover:text-coral transition-colors">+90 534 465 62 35</a>
                </p>
              </div>
            </div>

            <div className="flex items-start gap-4">
              <div className="w-12 h-12 bg-white rounded-full flex items-center justify-center shrink-0 shadow-md">
                <Mail className="text-coral w-6 h-6" />
              </div>
              <div>
                <h4 className="font-bold text-xl mb-2 font-serif">{dict.contact.email}</h4>
                <p className="text-gray-600">
                  <a href="mailto:info@moybeachakyaka.com" className="hover:text-coral transition-colors">info@moybeachakyaka.com</a>
                </p>
              </div>
            </div>

            <div className="flex items-start gap-4">
              <div className="w-12 h-12 bg-white rounded-full flex items-center justify-center shrink-0 shadow-md">
                <Clock className="text-coral w-6 h-6" />
              </div>
              <div>
                <h4 className="font-bold text-xl mb-2 font-serif">{dict.contact.hours.title}</h4>
                <p className="text-gray-600">
                  {dict.contact.hours.text}
                </p>
              </div>
            </div>
          </div>

          {/* Google Maps Embed */}
          <div className="w-full h-[400px] lg:h-full min-h-[400px] bg-gray-200 rounded-2xl overflow-hidden shadow-lg border-4 border-white">
            <iframe 
              src="https://maps.google.com/maps?hl=tr&gl=TR&cid=17585469489776666725&output=embed" 
              width="100%" 
              height="100%" 
              style={{ border: 0 }} 
              allowFullScreen={false} 
              loading="lazy" 
              referrerPolicy="no-referrer-when-downgrade"
              title="Moy Beach Konum"
            />
          </div>

        </div>
      </div>
    </section>
  );
}