'use client';

import { useTranslations } from 'next-intl';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import { MapPin, Phone, Mail, Printer, Smartphone, Send } from 'lucide-react';

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

  return (
    <main className="min-h-screen bg-bone">
      <Navbar />

      {/* Hero Header */}
      <section className="pt-40 pb-20 px-6 max-w-7xl mx-auto text-center">
        <span className="text-salmakis-blue font-bold tracking-[0.3em] uppercase text-xs mb-4 block">
          Salmakis Villas
        </span>
        <h1 className="text-5xl md:text-7xl font-serif text-aegean-dark mb-6">
          {t('title')}
        </h1>
        <p className="text-aegean-dark/60 max-w-2xl mx-auto text-lg leading-relaxed">
          {t('description')}
        </p>
        <div className="w-24 h-[1px] bg-aegean-dark/20 mx-auto mt-12" />
      </section>

      {/* Contact Content */}
      <section className="pb-24 px-6 max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-20">
        {/* Contact info cards */}
        <div className="space-y-12">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div className="p-8 bg-white rounded-3xl border border-aegean-dark/5 shadow-sm space-y-4">
              <div className="w-10 h-10 rounded-xl bg-salmakis-blue/10 flex items-center justify-center text-salmakis-blue">
                <MapPin className="w-5 h-5" />
              </div>
              <h3 className="text-lg font-serif text-aegean-dark">{t('address')}</h3>
              <p className="text-xs uppercase font-bold tracking-widest text-aegean-dark/50 leading-loose">
                Dereköy yolu, Bademlik Mevkii Küme evleri No:24 Gürece Ortakent Bodrum/Muğla Türkiye
              </p>
            </div>

            <div className="p-8 bg-white rounded-3xl border border-aegean-dark/5 shadow-sm space-y-4">
              <div className="w-10 h-10 rounded-xl bg-salmakis-blue/10 flex items-center justify-center text-salmakis-blue">
                <Phone className="w-5 h-5" />
              </div>
              <h3 className="text-lg font-serif text-aegean-dark">{t('phone')}</h3>
              <div className="text-sm font-medium text-aegean-dark/70 space-y-1">
                <p>+90 252 316 28 77</p>
                <p>+90 252 316 27 38</p>
                <p>+90 252 316 65 09</p>
              </div>
            </div>

            <div className="p-8 bg-white rounded-3xl border border-aegean-dark/5 shadow-sm space-y-4">
              <div className="w-10 h-10 rounded-xl bg-salmakis-blue/10 flex items-center justify-center text-salmakis-blue">
                <Smartphone className="w-5 h-5" />
              </div>
              <h3 className="text-lg font-serif text-aegean-dark">{t('mobile')}</h3>
              <p className="text-sm font-medium text-aegean-dark/70">
                +90 532 731 78 04
              </p>
            </div>

            <div className="p-8 bg-white rounded-3xl border border-aegean-dark/5 shadow-sm space-y-4">
              <div className="w-10 h-10 rounded-xl bg-salmakis-blue/10 flex items-center justify-center text-salmakis-blue">
                <Mail className="w-5 h-5" />
              </div>
              <h3 className="text-lg font-serif text-aegean-dark">{t('email')}</h3>
              <p className="text-sm font-medium text-aegean-dark/70">
                info@salmakisvillas.com
              </p>
            </div>
          </div>

          <div className="p-8 bg-aegean-dark text-bone rounded-3xl shadow-xl flex items-center justify-between">
            <div className="space-y-2">
               <h3 className="text-xl font-serif text-sand">{t('fax')}</h3>
               <p className="text-sm opacity-60">+90 252 316 27 37</p>
            </div>
            <Printer className="w-8 h-8 opacity-20" />
          </div>
        </div>

        {/* Contact Form */}
        <div className="bg-white p-10 md:p-12 rounded-[2rem] shadow-2xl border border-aegean-dark/5">
          <h2 className="text-3xl font-serif text-aegean-dark mb-8">Bize Mesaj Gönderin</h2>
          <form className="space-y-6">
            <div className="space-y-2">
              <label className="text-[10px] font-bold uppercase tracking-widest text-aegean-dark/40 ml-1">
                {t('form_name')}
              </label>
              <input 
                type="text" 
                className="w-full bg-bone/50 border border-aegean-dark/5 rounded-2xl px-6 py-4 focus:outline-none focus:ring-2 focus:ring-salmakis-blue/20 transition-all font-sans"
              />
            </div>
            <div className="space-y-2">
              <label className="text-[10px] font-bold uppercase tracking-widest text-aegean-dark/40 ml-1">
                {t('form_email')}
              </label>
              <input 
                type="email" 
                className="w-full bg-bone/50 border border-aegean-dark/5 rounded-2xl px-6 py-4 focus:outline-none focus:ring-2 focus:ring-salmakis-blue/20 transition-all font-sans"
              />
            </div>
            <div className="space-y-2">
              <label className="text-[10px] font-bold uppercase tracking-widest text-aegean-dark/40 ml-1">
                {t('form_message')}
              </label>
              <textarea 
                rows={5}
                className="w-full bg-bone/50 border border-aegean-dark/5 rounded-2xl px-6 py-4 focus:outline-none focus:ring-2 focus:ring-salmakis-blue/20 transition-all font-sans resize-none"
              />
            </div>
            <button 
              type="submit"
              className="w-full bg-aegean-dark hover:bg-salmakis-blue text-bone py-5 rounded-2xl font-bold uppercase tracking-[0.2em] text-xs flex items-center justify-center space-x-3 transition-all transform hover:-translate-y-1"
            >
              <span>{t('form_submit')}</span>
              <Send className="w-4 h-4" />
            </button>
          </form>
        </div>
      </section>

      {/* Map Section */}
      <section className="h-[500px] w-full bg-aegean-dark/10 relative">
        <iframe 
          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m13!1d3183.1!2d27.35!3d37.05!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzfCsDAzJzAwLjAiTiAyN8KwMjEnMDAuMCJF!5e0!3m2!1sen!2str!4v1650000000000!5m2!1sen!2str" 
          className="w-full h-full grayscale opacity-80"
          style={{ border: 0 }} 
          allowFullScreen={true} 
          loading="lazy" 
        />
        <div className="absolute inset-0 pointer-events-none shadow-[inset_0_0_100px_rgba(0,0,0,0.1)]" />
      </section>

      <Footer />
    </main>
  );
}