'use client';
import React, { useState } from 'react';
import { Check, Loader2 } from 'lucide-react';
import { useLanguage } from '@client/contexts/LanguageContext';

interface FormData {
  name: string;
  email: string;
  subject: string;
  message: string;
}

export default function ContactPage() {
  const { t } = useLanguage();
  const [form, setForm] = useState<FormData>({ name: '', email: '', subject: '', message: '' });
  const [submitted, setSubmitted] = useState(false);
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    await new Promise(r => setTimeout(r, 1200));
    setLoading(false);
    setSubmitted(true);
  };

  return (
    <>
      {/* Hero */}
      <section className="py-20 sm:py-24 text-center relative overflow-hidden">
        <div className="absolute inset-0 -z-10">
          <div className="absolute top-0 right-1/4 w-64 sm:w-80 h-64 sm:h-80 bg-orange-400/15 dark:bg-orange-500/8 rounded-full blur-3xl" />
          <div className="absolute bottom-0 left-1/4 w-48 sm:w-64 h-48 sm:h-64 bg-teal-400/10 dark:bg-teal-500/6 rounded-full blur-3xl" />
        </div>
        <div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
          <p className="text-xs font-semibold text-orange-500 uppercase tracking-widest mb-4">{t('landing.contact.hero.badge', 'Get in touch')}</p>
          <h1 className="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mb-4">{t('landing.contact.hero.title', "We'd love to hear from you")}</h1>
          <p className="text-lg sm:text-xl text-gray-500 dark:text-gray-400">{t('landing.contact.hero.subtitle', 'Whether you have a question, need a demo, or just want to say hi — our team responds within 4 hours.')}</p>
        </div>
      </section>

      <section className="pb-20 sm:pb-24 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 lg:grid-cols-5 gap-8 sm:gap-12">
          {/* Form */}
          <div className="lg:col-span-3">
            {submitted ? (
              <div className="h-full flex flex-col items-center justify-center text-center py-16 sm:py-20 rounded-2xl bg-teal-50 dark:bg-teal-950/20 border border-teal-100 dark:border-teal-900/30">
                <div className="w-14 sm:w-16 h-14 sm:h-16 rounded-full bg-teal-100 dark:bg-teal-900/40 flex items-center justify-center mb-4">
                  <Check size={28} strokeWidth={2} className="text-teal-500" />
                </div>
                <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">{t('landing.contact.success.title', 'Message sent!')}</h3>
                <p className="text-gray-500 dark:text-gray-400 text-sm">{t('landing.contact.success.subtitle', "We'll get back to you within 4 hours during business hours.")}</p>
              </div>
            ) : (
              <form onSubmit={handleSubmit} className="space-y-5 p-6 sm:p-8 rounded-2xl bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 shadow-sm hover:shadow-md transition-shadow duration-300">
                <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-5 sm:mb-6">{t('landing.contact.form.title', 'Send us a message')}</h2>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-5">
                  <div>
                    <label className="block text-xs font-semibold text-gray-700 dark:text-gray-300 mb-1.5">{t('landing.contact.form.name_label', 'Full Name *')}</label>
                    <input required value={form.name} onChange={e => setForm(f => ({ ...f, name: e.target.value }))}
                      placeholder={t('landing.contact.form.name_placeholder', 'Marco Rossi')}
                      className="w-full px-3 py-2.5 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500/30 focus:border-orange-500 transition-all duration-200" />
                  </div>
                  <div>
                    <label className="block text-xs font-semibold text-gray-700 dark:text-gray-300 mb-1.5">{t('landing.contact.form.email_label', 'Email Address *')}</label>
                    <input required type="email" value={form.email} onChange={e => setForm(f => ({ ...f, email: e.target.value }))}
                      placeholder={t('landing.contact.form.email_placeholder', 'marco@restaurant.com')}
                      className="w-full px-3 py-2.5 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500/30 focus:border-orange-500 transition-all duration-200" />
                  </div>
                </div>
                <div>
                  <label className="block text-xs font-semibold text-gray-700 dark:text-gray-300 mb-1.5">{t('landing.contact.form.subject_label', 'Subject *')}</label>
                  <select required value={form.subject} onChange={e => setForm(f => ({ ...f, subject: e.target.value }))}
                    className="w-full px-3 py-2.5 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-orange-500/30 focus:border-orange-500 transition-all duration-200">
                    <option value="">{t('landing.contact.form.subject_default', 'Select a topic...')}</option>
                    <option>{t('landing.contact.form.subject_demo', 'Request a demo')}</option>
                    <option>{t('landing.contact.form.subject_support', 'Technical support')}</option>
                    <option>{t('landing.contact.form.subject_billing', 'Billing question')}</option>
                    <option>{t('landing.contact.form.subject_partnership', 'Partnership inquiry')}</option>
                    <option>{t('landing.contact.form.subject_general', 'General question')}</option>
                  </select>
                </div>
                <div>
                  <label className="block text-xs font-semibold text-gray-700 dark:text-gray-300 mb-1.5">{t('landing.contact.form.message_label', 'Message *')}</label>
                  <textarea required rows={5} value={form.message} onChange={e => setForm(f => ({ ...f, message: e.target.value }))}
                    placeholder={t('landing.contact.form.message_placeholder', "Tell us about your restaurant and what you're looking for...")}
                    className="w-full px-3 py-2.5 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500/30 focus:border-orange-500 transition-all duration-200 resize-none" />
                </div>
                <button type="submit" disabled={loading}
                  className="w-full py-3 rounded-xl bg-orange-500 hover:bg-orange-600 disabled:opacity-60 text-white font-semibold text-sm shadow-lg shadow-orange-500/25 hover:shadow-orange-500/40 hover:-translate-y-0.5 transition-all duration-200 active:scale-95 active:translate-y-0 flex items-center justify-center gap-2">
                  {loading ? (
                    <><Loader2 className="animate-spin w-4 h-4" />{t('landing.contact.form.sending', 'Sending...')}</>
                  ) : t('landing.contact.form.submit', 'Send Message')}
                </button>
              </form>
            )}
          </div>

          {/* Info */}
          <div className="lg:col-span-2 space-y-4 sm:space-y-6">
            {[
              { icon: '📍', title: t('landing.contact.info.hq', 'Headquarters'), lines: [t('landing.contact.info.hq_name', 'RestroAgent GmbH'), t('landing.contact.info.hq_street', 'Friedrichstraße 123'), t('landing.contact.info.hq_city', '10117 Berlin, Germany')] },
              { icon: '📧', title: t('landing.contact.info.email', 'Email'), lines: [t('landing.contact.info.email_hello', 'hello@restroagent.ai'), t('landing.contact.info.email_support', 'support@restroagent.ai')] },
              { icon: '📞', title: t('landing.contact.info.phone', 'Phone'), lines: [t('landing.contact.info.phone_number', '+49 30 1234 5678'), t('landing.contact.info.phone_hours', 'Mon–Fri, 9am–6pm CET')] },
              { icon: '⚡', title: t('landing.contact.info.response', 'Response time'), lines: [t('landing.contact.info.response_normal', '< 4 hours during business hours'), t('landing.contact.info.response_critical', 'Critical issues: < 1 hour')] },
            ].map((item, i) => (
              <div key={i} className="flex gap-3 sm:gap-4 p-4 sm:p-5 rounded-xl bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 hover:shadow-md hover:-translate-y-0.5 transition-all duration-200">
                <div className="text-xl sm:text-2xl flex-shrink-0">{item.icon}</div>
                <div>
                  <p className="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">{item.title}</p>
                  {item.lines.map((l, j) => <p key={j} className="text-sm text-gray-700 dark:text-gray-300">{l}</p>)}
                </div>
              </div>
            ))}

            <div className="p-4 sm:p-5 rounded-xl bg-orange-50 dark:bg-orange-950/20 border border-orange-100 dark:border-orange-900/30 hover:shadow-md hover:shadow-orange-100/50 dark:hover:shadow-orange-900/20 hover:-translate-y-0.5 transition-all duration-200">
              <p className="text-sm font-semibold text-orange-700 dark:text-orange-400 mb-1">{t('landing.contact.demo.title', '🚀 Want a live demo?')}</p>
              <p className="text-xs text-orange-600/80 dark:text-orange-400/70">{t('landing.contact.demo.desc', "Book a 30-minute call and we'll show you RestroAgent live with your menu. No commitment required.")}</p>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}