'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import { useLanguage } from '@/context/LanguageContext';

export default function ContactPage() {
  const [formData, setFormData] = useState({ name: '', phone: '', email: '', branch: '', category: '', treatment: '', date: '', time: '', notes: '' });
  const [isSubmitted, setIsSubmitted] = useState(false);
  const { t } = useLanguage();

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

  return (
    <main className="min-h-screen bg-ivory">
      <Navbar />
      <section className="relative py-16 md:py-24 bg-espresso overflow-hidden">
        <div className="container-custom text-center text-white relative z-10">
          <h1 className="font-cormorant text-4xl md:text-6xl font-bold mb-4 uppercase">📞 {t('contact.page.title')}</h1>
          <p className="text-ivory/80 max-w-2xl mx-auto">{t('contact.page.subtitle')}</p>
          <nav className="mt-4 text-xs tracking-widest uppercase">
            <Link href="/" className="hover:text-gold transition">{t('breadcrumb.home')}</Link><span className="mx-2">/</span><span className="text-ivory/60">{t('breadcrumb.contact')}</span>
          </nav>
        </div>
      </section>

      <section className="py-16">
        <div className="container-custom">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
            <div className="space-y-6">
              <div className="card bg-white p-6">
                <h2 className="font-cormorant text-2xl font-bold text-espresso mb-6">📍 {t('contact.head-office')}</h2>
                <div className="space-y-4">
                  <div><p className="font-semibold text-espresso">Carla Skin Clinic</p><p className="text-grey-dark text-sm">Bellezza Shopping Arcade GF<br />Jl. Arteri Permata Hijau, Kebayoran Lama<br />Jakarta 12210</p></div>
                  <div><p className="font-semibold text-espresso mb-1">📞 {t('contact.call-center')}</p><a href="tel:+622112345678" className="text-gold hover:underline">(021) 1234-5678</a><p className="text-xs text-grey">(Senin-Minggu, 08:00-21:00)</p></div>
                  <div><p className="font-semibold text-espresso mb-1">📱 {t('contact.whatsapp')}</p><a href="https://wa.me/6281234567890" target="_blank" rel="noopener noreferrer" className="text-gold hover:underline">0812-3456-7890</a></div>
                  <div><p className="font-semibold text-espresso mb-1">📧 {t('contact.email')}</p><a href="mailto:info@claraskin.co.id" className="text-gold hover:underline">info@claraskin.co.id</a><br /><a href="mailto:care@claraskin.co.id" className="text-gold hover:underline text-sm">care@claraskin.co.id ({t('contact.wa.care')})</a></div>
                </div>
              </div>
              <div className="card bg-white p-6">
                <h2 className="font-cormorant text-2xl font-bold text-espresso mb-4">🕐 {t('contact.hours')}</h2>
                <div className="space-y-3"><div className="flex justify-between"><span>{t('contact.hours.call')}</span><span className="font-semibold">08:00 – 21:00 WIB</span></div><div className="flex justify-between"><span>{t('contact.hours.online')}</span><span className="font-semibold">{t('contact.hours.247')}</span></div></div>
              </div>
            </div>
            <div className="card bg-white overflow-hidden"><div className="aspect-square md:aspect-auto md:h-full bg-ivory flex items-center justify-center"><div className="text-center p-6"><p className="text-4xl mb-4">🗺️</p><p className="text-espresso font-semibold mb-2">Google Maps</p><p className="text-grey-dark text-sm mb-4">Peta interaktif akan ditampilkan di sini</p><a href="https://maps.google.com/?q=Bellezza+Shopping+Arcade+Jakarta" target="_blank" rel="noopener noreferrer" className="btn-primary inline-block">Buka di Google Maps</a></div></div></div>
          </div>
        </div>
      </section>

      <section className="bg-white py-16">
        <div className="container-custom max-w-3xl">
          <div className="text-center mb-12"><h2 className="font-cormorant text-3xl font-bold text-espresso mb-3">{t('contact.form.title')}</h2></div>
          {isSubmitted ? (
            <div className="card bg-white p-8 text-center"><p className="text-5xl mb-4">✅</p><h3 className="font-semibold text-2xl text-espresso mb-2">{t('contact.form.submitted')}</h3><p className="text-grey-dark mb-6">{t('contact.form.submitted-desc')}</p><button onClick={() => { setIsSubmitted(false); setFormData({ name: '', phone: '', email: '', branch: '', category: '', treatment: '', date: '', time: '', notes: '' }); }} className="btn-primary">{t('contact.form.new')}</button></div>
          ) : (
            <form onSubmit={handleSubmit} className="card bg-white p-8 space-y-6">
              <fieldset><h3 className="font-semibold text-lg text-gold mb-4">1. {t('contact.form.personal')}</h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div><label className="block text-sm font-semibold text-espresso mb-1">{t('contact.form.name')}*</label><input type="text" name="name" value={formData.name} onChange={handleChange} required className="input-field" placeholder={t('contact.form.name')} /></div>
                  <div><label className="block text-sm font-semibold text-espresso mb-1">{t('contact.form.phone')}*</label><input type="tel" name="phone" value={formData.phone} onChange={handleChange} required className="input-field" placeholder="08xxxxxxxxxx" /></div>
                  <div className="md:col-span-2"><label className="block text-sm font-semibold text-espresso mb-1">{t('contact.form.email')}</label><input type="email" name="email" value={formData.email} onChange={handleChange} className="input-field" placeholder="email@example.com" /></div>
                </div>
              </fieldset>
              <fieldset><h3 className="font-semibold text-lg text-gold mb-4">2. {t('contact.form.booking-detail')}</h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div><label className="block text-sm font-semibold text-espresso mb-1">{t('contact.form.branch')}*</label><select name="branch" value={formData.branch} onChange={handleChange} required className="input-field"><option value="">{t('contact.form.branch')}</option><option value="senayan">Jakarta - Senayan</option><option value="kelapa-gading">Jakarta - Kelapa Gading</option><option value="pondok-indah">Jakarta - Pondok Indah</option><option value="bandung">Bandung</option><option value="surabaya">Surabaya</option></select></div>
                  <div><label className="block text-sm font-semibold text-espresso mb-1">{t('contact.form.category')}*</label><select name="category" value={formData.category} onChange={handleChange} required className="input-field"><option value="">{t('contact.form.category')}</option><option value="facial">Facial Treatment</option><option value="hair-removal">Hair Removal</option><option value="acne">Acne Treatment</option><option value="anti-aging">Anti-Aging</option><option value="body">Body Treatment</option></select></div>
                  <div className="md:col-span-2"><label className="block text-sm font-semibold text-espresso mb-1">{t('contact.form.treatment')}*</label><select name="treatment" value={formData.treatment} onChange={handleChange} required className="input-field"><option value="">{t('contact.form.treatment')}</option><option value="basic-facial">Carla Basic Facial</option><option value="glow-facial">Carla Glow Facial</option><option value="ipl-hair">IPL Hair Removal</option></select></div>
                </div>
              </fieldset>
              <fieldset><h3 className="font-semibold text-lg text-gold mb-4">3. {t('contact.form.schedule')}</h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div><label className="block text-sm font-semibold text-espresso mb-1">{t('contact.form.date')}*</label><input type="date" name="date" value={formData.date} onChange={handleChange} required className="input-field" /></div>
                  <div><label className="block text-sm font-semibold text-espresso mb-1">{t('contact.form.time')}*</label><select name="time" value={formData.time} onChange={handleChange} required className="input-field"><option value="">{t('contact.form.time')}</option><option value="10:00">10:00</option><option value="11:00">11:00</option><option value="13:00">13:00</option><option value="14:00">14:00</option><option value="16:00">16:00</option></select></div>
                </div>
              </fieldset>
              <fieldset><h3 className="font-semibold text-lg text-gold mb-4">4. {t('contact.form.preferences')}</h3>
                <div className="space-y-4"><div><label className="block text-sm font-semibold text-espresso mb-1">{t('contact.form.notes')}</label><textarea name="notes" value={formData.notes} onChange={handleChange} className="input-field min-h-[100px]" placeholder="..." /></div></div>
              </fieldset>
              <div className="pt-6 border-t border-blush">
                <label className="flex items-start gap-2 mb-6"><input type="checkbox" required className="mt-1 accent-gold" /><span className="text-sm text-grey-dark">{t('contact.form.agree')}</span></label>
                <button type="submit" className="btn-primary w-full">{t('contact.form.submit')}</button>
              </div>
            </form>
          )}
        </div>
      </section>

      <section className="bg-gold text-white py-16">
        <div className="container-custom">
          <h2 className="font-cormorant text-2xl md:text-3xl font-bold text-center mb-8">💬 {t('contact.wa.chat')}</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {[
              { icon: '📅', title: 'contact.wa.reservation', desc: 'contact.wa.reservation.desc' },
              { icon: '💝', title: 'contact.wa.care', desc: 'contact.wa.care.desc' },
              { icon: '🤝', title: 'contact.wa.business', desc: 'contact.wa.business.desc' },
            ].map((item, i) => (
              <div key={i} className="text-center p-6 bg-white bg-opacity-10 rounded-lg hover:bg-opacity-20 transition">
                <p className="text-3xl mb-3">{item.icon}</p>
                <h3 className="font-semibold mb-2">{t(item.title)}</h3>
                <p className="text-sm text-white/80 mb-4">{t(item.desc)}</p>
                <a href={`https://wa.me/628123456789${i}`} target="_blank" rel="noopener noreferrer" className="px-6 py-2 bg-white text-espresso text-xs uppercase tracking-widest font-semibold rounded hover:bg-ivory transition inline-block">{t('contact.wa.chat')}</a>
              </div>
            ))}
          </div>
        </div>
      </section>
      <Footer />
    </main>
  );
}