'use client'

import { motion } from "framer-motion"
import { Mail, Phone, MapPin, Clock, ArrowUpRight, MessageCircle } from 'lucide-react'
import Link from "next/link"



const InstagramIcon = ({ size = 20 }: { size?: number }) => (
   <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
      <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
      <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
   </svg>
)

export default function ContactClient({ lang, dict }: { lang: string, dict: any }) {
   return (
      <main className="bg-[#FAF7F0] min-h-screen text-[#1A1A1A]">


         {/* HERO SECTION */}
         <section className="pt-64 pb-32 px-6">
            <div className="max-w-[1400px] mx-auto">
               <motion.h1
                  initial={{ opacity: 0, y: 40 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 1, ease: [0.33, 1, 0.68, 1] }}
                  className="text-[12vw] md:text-[150px] font-serif leading-[0.8] tracking-tight uppercase"
               >
                  {dict.contact.title.split(' ')[0]} <br /> <span className="italic ml-[5vw]">{dict.contact.title.split(' ').slice(1).join(' ')}</span>
               </motion.h1>
            </div>
         </section>

         {/* MINIMALIST INFO GRID */}
         <section className="py-24 px-6 md:px-12 max-w-[1400px] mx-auto">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-0.5 bg-[#1A1A1A]/10 border border-[#1A1A1A]/10">

               {/* Address */}
               <motion.div
                  initial={{ opacity: 0 }}
                  whileInView={{ opacity: 1 }}
                  viewport={{ once: true }}
                  className="bg-[#FAF7F0] p-16 space-y-12 flex flex-col justify-between aspect-square"
               >
                  <MapPin size={32} strokeWidth={1} className="text-[#C88C4B]" />
                  <div className="space-y-6">
                     <h3 className="text-3xl font-serif">{dict.contact.visit.t}</h3>
                     <p className="text-xl text-[#1A1A1A]/60 italic leading-relaxed">
                        {dict.contact.visit.d}
                     </p>
                     <Link href="https://www.google.com/maps/search/?api=1&query=Ayris+Apart+Milas+Ören" target="_blank" className="inline-flex items-center space-x-2 text-xs font-bold uppercase tracking-[0.3em] border-b border-[#1A1A1A] pb-1">
                        <span>{dict.contact.btn.map}</span>
                        <ArrowUpRight size={14} />
                     </Link>
                  </div>
               </motion.div>

               {/* Direct Connect */}
               <motion.div
                  initial={{ opacity: 0 }}
                  whileInView={{ opacity: 1 }}
                  viewport={{ once: true }}
                  transition={{ delay: 0.1 }}
                  className="bg-[#FAF7F0] p-16 space-y-12 flex flex-col justify-between aspect-square"
               >
                  <Phone size={32} strokeWidth={1} className="text-[#C88C4B]" />
                  <div className="space-y-6">
                     <h3 className="text-3xl font-serif">{dict.contact.call.t}</h3>
                     <div className="space-y-2">
                        <p className="text-2xl font-medium">+90 543 231 87 13</p>
                        <p className="text-lg text-[#1A1A1A]/50 italic">{dict.contact.call.d}</p>
                     </div>
                     <Link href="tel:+905432318713" className="inline-flex items-center space-x-2 text-xs font-bold uppercase tracking-[0.3em] border-b border-[#1A1A1A] pb-1">
                        <span>{dict.contact.btn.call}</span>
                        <ArrowUpRight size={14} />
                     </Link>
                  </div>
               </motion.div>

               {/* Email */}
               <motion.div
                  initial={{ opacity: 0 }}
                  whileInView={{ opacity: 1 }}
                  viewport={{ once: true }}
                  transition={{ delay: 0.2 }}
                  className="bg-[#FAF7F0] p-16 space-y-12 flex flex-col justify-between aspect-square"
               >
                  <Mail size={32} strokeWidth={1} className="text-[#C88C4B]" />
                  <div className="space-y-6">
                     <h3 className="text-3xl font-serif">{dict.contact.write.t}</h3>
                     <div className="space-y-2">
                        <p className="text-2xl font-medium">hello@ayrisapart.com</p>
                        <p className="text-lg text-[#1A1A1A]/50 italic">{dict.contact.write.d}</p>
                     </div>
                     <Link href="mailto:hello@ayrisapart.com" className="inline-flex items-center space-x-2 text-xs font-bold uppercase tracking-[0.3em] border-b border-[#1A1A1A] pb-1">
                        <span>{dict.contact.btn.mail}</span>
                        <ArrowUpRight size={14} />
                     </Link>
                  </div>
               </motion.div>

               {/* WhatsApp */}
               <motion.div
                  initial={{ opacity: 0 }}
                  whileInView={{ opacity: 1 }}
                  viewport={{ once: true }}
                  className="bg-[#FAF7F0] p-16 space-y-12 flex flex-col justify-between aspect-square"
               >
                  <MessageCircle size={32} strokeWidth={1} className="text-[#C88C4B]" />
                  <div className="space-y-6">
                     <h3 className="text-3xl font-serif">{dict.contact.wa.t}</h3>
                     <p className="text-xl text-[#1A1A1A]/60 italic leading-relaxed">
                        {dict.contact.wa.d}
                     </p>
                     <Link href="https://wa.me/905432318713" target="_blank" className="inline-flex items-center space-x-2 text-xs font-bold uppercase tracking-[0.3em] border-b border-[#1A1A1A] pb-1">
                        <span>{dict.contact.btn.wa}</span>
                        <ArrowUpRight size={14} />
                     </Link>
                  </div>
               </motion.div>

               {/* Instagram */}
               <motion.div
                  initial={{ opacity: 0 }}
                  whileInView={{ opacity: 1 }}
                  viewport={{ once: true }}
                  transition={{ delay: 0.1 }}
                  className="bg-[#FAF7F0] p-16 space-y-12 flex flex-col justify-between aspect-square"
               >
                  <InstagramIcon size={32} />
                  <div className="space-y-6">
                     <h3 className="text-3xl font-serif">{dict.contact.ig.t}</h3>
                     <p className="text-xl text-[#1A1A1A]/60 italic leading-relaxed">
                        {dict.contact.ig.d}
                     </p>
                     <Link href="#" className="inline-flex items-center space-x-2 text-xs font-bold uppercase tracking-[0.3em] border-b border-[#1A1A1A] pb-1">
                        <span>{dict.contact.btn.ig}</span>
                        <ArrowUpRight size={14} />
                     </Link>
                  </div>
               </motion.div>

               {/* Working Hours */}
               <motion.div
                  initial={{ opacity: 0 }}
                  whileInView={{ opacity: 1 }}
                  viewport={{ once: true }}
                  transition={{ delay: 0.2 }}
                  className="bg-[#FAF7F0] p-16 space-y-12 flex flex-col justify-between aspect-square"
               >
                  <Clock size={32} strokeWidth={1} className="text-[#C88C4B]" />
                  <div className="space-y-6">
                     <h3 className="text-3xl font-serif">{dict.contact.hours.t}</h3>
                     <div className="space-y-2">
                        <p className="text-xl font-medium">{dict.contact.hours.d}</p>
                        <p className="text-lg text-[#1A1A1A]/50 italic">{dict.contact.hours.sub}</p>
                     </div>
                     <div className="text-[10px] font-bold uppercase tracking-[0.4em] text-[#1A1A1A]/30">Open 24/7 for you</div>
                  </div>
               </motion.div>
            </div>
         </section>

         {/* FULL WIDTH MAP SECTION */}
         <section className="py-24">
            <div className="h-[600px] w-full relative grayscale hover:grayscale-0 transition-all duration-1000">
               <iframe
                  src="https://maps.google.com/maps?q=Ayris+Apart+Milas+Ören&t=&z=15&ie=UTF8&iwloc=&output=embed"
                  width="100%"
                  height="100%"
                  style={{ border: 0 }}
                  allowFullScreen
                  loading="lazy"
                  referrerPolicy="no-referrer-when-downgrade"
               ></iframe>
            </div>
         </section>


      </main>
   )
}