'use client'

import { motion } from 'framer-motion'
import Image from 'next/image'
import BougainvilleaMotif from '@/components/BougainvilleaMotif'
import { MapPin, Waves, ShoppingBasket, Coffee, PersonStanding, Phone, Mail } from 'lucide-react'
import { useTranslations } from 'next-intl'

const EASE: [number, number, number, number] = [0.22, 1, 0.36, 1]

export default function ContactPage() {
  const t = useTranslations('contact')

  return (
    <div className="bg-background min-h-screen text-on-surface pt-32 pb-section-gap">
      {/* Hero Section */}
      <section className="px-margin-mobile md:px-gutter max-w-container-max mx-auto mb-12">
        <motion.div 
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, ease: EASE }}
          className="relative inline-block mb-4"
        >
          <span className="absolute -top-6 -left-4 text-accent-pink/30 -rotate-12 pointer-events-none">
            <BougainvilleaMotif className="w-12 h-12" />
          </span>
          <h1 className="font-serif text-[40px] md:text-[48px] font-semibold text-on-surface">{t('title')}</h1>
        </motion.div>
        <motion.p 
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.1, ease: EASE }}
          className="font-sans text-[18px] text-on-surface-variant max-w-2xl"
        >
          {t('description')}
        </motion.p>
      </section>

      {/* Location Grid */}
      <section className="bg-surface-container-low py-16 mb-16">
        <div className="px-margin-mobile md:px-gutter max-w-container-max mx-auto grid grid-cols-1 lg:grid-cols-12 gap-gutter items-start">
          
          {/* Map Container */}
          <motion.div 
            initial={{ opacity: 0, x: -20 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8, ease: EASE }}
            className="lg:col-span-8 rounded-[24px] overflow-hidden aspect-video shadow-[0_32px_64px_-12px_rgba(112,90,76,0.08)] border border-outline-variant/30 relative bg-surface-container-high"
          >
            <div className="w-full h-full flex flex-col items-center justify-center text-secondary-container">
              <MapPin className="w-16 h-16 mb-4 text-primary/40" />
              <span className="text-primary/60 font-sans font-medium">{t('connect.map_placeholder')}</span>
            </div>

            {/* Mock Map Interaction Layer */}
            <div className="absolute bottom-6 left-6 bg-surface/90 backdrop-blur-md p-4 rounded-xl shadow-lg border border-outline-variant/20 flex items-center gap-3">
              <div className="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white">
                <MapPin className="w-5 h-5" />
              </div>
              <div>
                <p className="font-sans font-bold text-[12px] text-on-surface uppercase tracking-wider">{t('connect.address_title')}</p>
                <p className="font-sans text-[16px] text-secondary">{t('connect.address_value')}</p>
              </div>
            </div>
          </motion.div>

          {/* Highlights List */}
          <motion.div 
            initial={{ opacity: 0, x: 20 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8, ease: EASE, delay: 0.2 }}
            className="lg:col-span-4 space-y-8"
          >
            <div className="relative">
              <h2 className="font-serif text-[24px] font-medium text-secondary">{t('walking_distance')}</h2>
              <div className="h-1 w-12 bg-accent-pink mt-2 rounded-full"></div>
            </div>

            <ul className="space-y-6">
              {[
                { icon: Waves, title: t('locations.beach.title'), desc: t('locations.beach.desc') },
                { icon: ShoppingBasket, title: t('locations.market.title'), desc: t('locations.market.desc') },
                { icon: Coffee, title: t('locations.cafe.title'), desc: t('locations.cafe.desc') },
                { icon: PersonStanding, title: t('locations.hiking.title'), desc: t('locations.hiking.desc') },
              ].map((item, idx) => (
                <li key={idx} className="flex items-start gap-4 p-4 rounded-2xl bg-surface transition-transform hover:translate-x-2 duration-300 shadow-sm border border-outline-variant/10">
                  <item.icon className="w-6 h-6 text-primary mt-1 shrink-0" />
                  <div>
                    <p className="font-sans font-bold text-[14px] text-on-surface tracking-wide">{item.title}</p>
                    <p className="font-sans text-[16px] text-on-surface-variant mt-1">{item.desc}</p>
                  </div>
                </li>
              ))}
            </ul>
          </motion.div>

        </div>
      </section>

      {/* Contact Section */}
      <section className="px-margin-mobile md:px-gutter max-w-container-max mx-auto">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
          
          {/* Contact Form Card */}
          <motion.div 
            initial={{ opacity: 0, y: 40 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8, ease: EASE }}
            className="bg-surface p-8 md:p-12 rounded-[32px] shadow-[0_32px_64px_-12px_rgba(112,90,76,0.08)] border border-outline-variant/20"
          >
            <h3 className="font-serif text-[32px] font-semibold text-on-surface mb-8">{t('form.title')}</h3>
            <form className="space-y-6" onSubmit={(e) => e.preventDefault()}>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="space-y-2">
                  <label className="font-sans font-bold text-secondary text-[12px] uppercase tracking-widest ml-1">{t('form.name')}</label>
                  <input type="text" placeholder={t('form.name_placeholder')} className="w-full bg-surface-container-low border-none rounded-xl p-4 focus:ring-2 focus:ring-primary focus:outline-none transition-all font-sans text-[16px] outline-none" />
                </div>
                <div className="space-y-2">
                  <label className="font-sans font-bold text-secondary text-[12px] uppercase tracking-widest ml-1">{t('form.email')}</label>
                  <input type="email" placeholder={t('form.email_placeholder')} className="w-full bg-surface-container-low border-none rounded-xl p-4 focus:ring-2 focus:ring-primary focus:outline-none transition-all font-sans text-[16px] outline-none" />
                </div>
              </div>
              
              <div className="space-y-2">
                <label className="font-sans font-bold text-secondary text-[12px] uppercase tracking-widest ml-1">{t('form.subject')}</label>
                <input type="text" placeholder={t('form.subject_placeholder')} className="w-full bg-surface-container-low border-none rounded-xl p-4 focus:ring-2 focus:ring-primary focus:outline-none transition-all font-sans text-[16px] outline-none" />
              </div>

              <div className="space-y-2">
                <label className="font-sans font-bold text-secondary text-[12px] uppercase tracking-widest ml-1">{t('form.message')}</label>
                <textarea rows={4} placeholder={t('form.message_placeholder')} className="w-full bg-surface-container-low border-none rounded-xl p-4 focus:ring-2 focus:ring-primary focus:outline-none transition-all font-sans text-[16px] outline-none"></textarea>
              </div>

              <button type="submit" className="w-full bg-accent-pink text-white py-4 rounded-full font-sans font-bold text-[14px] tracking-wider uppercase hover:opacity-90 transition-all duration-300 transform hover:-translate-y-1 shadow-md cursor-pointer focus:outline-none focus-visible:ring-4 focus-visible:ring-accent-pink/50 focus-visible:ring-offset-2">
                {t('form.submit')}
              </button>
            </form>
          </motion.div>

          {/* Contact Details & Visual */}
          <motion.div 
            initial={{ opacity: 0, x: 20 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8, ease: EASE, delay: 0.2 }}
            className="space-y-12"
          >
            <div className="space-y-6">
              <h3 className="font-serif text-[32px] font-semibold text-on-surface">{t('connect.title')}</h3>
              <p className="font-sans text-[18px] text-on-surface-variant">
                {t('connect.description')}
              </p>
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-8">
              <div className="flex items-center gap-4">
                <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary shrink-0">
                  <Phone className="w-5 h-5" />
                </div>
                <div>
                  <p className="font-sans font-bold text-[12px] text-on-surface-variant uppercase tracking-wider">{t('connect.phone')}</p>
                  <p className="font-sans text-[16px] text-secondary font-medium">+90 530 510 98 42</p>
                </div>
              </div>

              <div className="flex items-center gap-4">
                <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary shrink-0">
                  <Mail className="w-5 h-5" />
                </div>
                <div>
                  <p className="font-sans font-bold text-[12px] text-on-surface-variant uppercase tracking-wider">{t('connect.email')}</p>
                  <p className="font-sans text-[16px] text-secondary font-medium">iletisim@sitarapart.com</p>
                </div>
              </div>
            </div>

            {/* Decorative Image */}
            <div className="relative rounded-[24px] overflow-hidden aspect-[4/3] shadow-md border border-outline-variant/20">
              <Image 
                src="https://images.unsplash.com/photo-1596394516093-501ba68a0ba6?auto=format&fit=crop&q=80"
                alt="Akyaka Details"
                fill
                sizes="(max-width: 768px) 100vw, 50vw"
                className="object-cover"
              />
            </div>
          </motion.div>

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