"use client";

import { useTranslations } from 'next-intl';
import { motion } from 'framer-motion';
import { MapPin, Phone, Send } from 'lucide-react';
import { Instagram } from '@/components/InstagramIcon';
import { useState } from 'react';

export default function Contact() {
  const t = useTranslations('Contact');
  const [formData, setFormData] = useState({ name: '', date: '', guests: '', message: '' });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const phone = process.env.NEXT_PUBLIC_WHATSAPP_NUMBER || '905000000000';
    const text = `*Yeni Rezervasyon Talebi*%0A%0A*Ad Soyad:* ${formData.name}%0A*Tarih:* ${formData.date}%0A*Kişi Sayısı:* ${formData.guests}%0A*Mesaj:* ${formData.message}`;
    window.open(`https://wa.me/${phone}?text=${text}`, '_blank');
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const contactItems = [
    {
      Icon: MapPin,
      label: 'Adres',
      value: t('address'),
      color: 'text-coral',
      bg: 'bg-coral/10',
    },
    {
      Icon: Phone,
      label: 'Telefon / WhatsApp',
      value: `+${process.env.NEXT_PUBLIC_WHATSAPP_NUMBER || '90 500 000 00 00'}`,
      color: 'text-aqua',
      bg: 'bg-aqua/10',
    },
    {
      Icon: Instagram,
      label: 'Instagram',
      value: '@kozmosbeach',
      href: 'https://www.instagram.com/kozmosbeach/',
      color: 'text-amber',
      bg: 'bg-amber/10',
    },
  ];

  const inputClass =
    'w-full bg-sand border border-sandy rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-coral focus:ring-1 focus:ring-coral transition-all placeholder:text-midnight/30';

  return (
    <section id="contact" className="py-28 bg-sandy/25 text-midnight">
      <div className="container mx-auto px-6 lg:px-12">

        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="text-center mb-16"
        >
          <span className="text-xs tracking-[0.4em] uppercase font-black text-coral mb-4 block">
            — Bize Ulaşın
          </span>
          <h2 className="font-heading text-5xl md:text-6xl font-black text-midnight">
            {t('title')}
          </h2>
        </motion.div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16">

          {/* Left: info + form */}
          <motion.div
            initial={{ opacity: 0, x: -30 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            className="space-y-8"
          >
            {/* Contact info */}
            <div className="space-y-5">
              {contactItems.map(({ Icon, label, value, href, color, bg }) => (
                <div key={label} className="flex items-start gap-4">
                  <div className={`p-3 rounded-xl ${bg} ${color} flex-shrink-0`}>
                    <Icon size={19} />
                  </div>
                  <div>
                    <p className="font-bold text-sm text-midnight/50 mb-0.5">{label}</p>
                    {href ? (
                      <a
                        href={href}
                        target="_blank"
                        rel="noreferrer"
                        className={`${color} font-medium hover:underline`}
                      >
                        {value}
                      </a>
                    ) : (
                      <p className="text-midnight font-medium">{value}</p>
                    )}
                  </div>
                </div>
              ))}
            </div>

            {/* Form */}
            <form
              onSubmit={handleSubmit}
              className="bg-white p-8 rounded-3xl shadow-sm border border-sandy space-y-5"
            >
              <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                <div className="space-y-1.5">
                  <label className="text-[11px] font-black uppercase tracking-wider text-midnight/45">
                    {t('form.name')}
                  </label>
                  <input
                    required
                    type="text"
                    name="name"
                    value={formData.name}
                    onChange={handleChange}
                    className={inputClass}
                  />
                </div>
                <div className="space-y-1.5">
                  <label className="text-[11px] font-black uppercase tracking-wider text-midnight/45">
                    {t('form.date')}
                  </label>
                  <input
                    required
                    type="date"
                    name="date"
                    value={formData.date}
                    onChange={handleChange}
                    className={inputClass}
                  />
                </div>
              </div>

              <div className="space-y-1.5">
                <label className="text-[11px] font-black uppercase tracking-wider text-midnight/45">
                  {t('form.guests')}
                </label>
                <input
                  required
                  type="number"
                  min="1"
                  name="guests"
                  value={formData.guests}
                  onChange={handleChange}
                  className={inputClass}
                />
              </div>

              <div className="space-y-1.5">
                <label className="text-[11px] font-black uppercase tracking-wider text-midnight/45">
                  {t('form.message')}
                </label>
                <textarea
                  rows={3}
                  name="message"
                  value={formData.message}
                  onChange={handleChange}
                  className={inputClass + ' resize-none'}
                />
              </div>

              <button
                type="submit"
                className="w-full py-4 rounded-2xl font-black text-sm text-white flex items-center justify-center gap-2 hover:opacity-90 hover:scale-[1.01] transition-all shadow-md"
                style={{ background: 'linear-gradient(135deg, #FF5A36, #FFA827)' }}
              >
                <Send size={15} />
                {t('form.submit')}
              </button>
            </form>
          </motion.div>

          {/* Right: map */}
          <motion.div
            initial={{ opacity: 0, x: 30 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            className="min-h-[420px] lg:min-h-[600px] w-full rounded-3xl overflow-hidden shadow-2xl"
          >
            <iframe
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12754.717654763133!2d28.3144!3d36.9507!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14bf76ccf312ba37%3A0xcdaaa97b102b4bb7!2sAkyaka%2C%20Ula%2FMu%C4%9Fla!5e0!3m2!1str!2str!4v1700000000000!5m2!1str!2str"
              width="100%"
              height="100%"
              style={{ border: 0 }}
              allowFullScreen
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
            />
          </motion.div>

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