'use client';

import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { motion } from 'motion/react';
import Link from 'next/link';
import { Mail, Phone, Clock, Send, CheckCircle, Home, ChevronRight } from 'lucide-react';
import { Container, Input, Textarea, Button } from '@/components/ui';

export default function ContactPage() {
  const { t } = useTranslation();
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: '',
    message: '',
  });
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log('Form submitted:', formData);
    setSubmitted(true);
    setTimeout(() => {
      setSubmitted(false);
      setFormData({ name: '', email: '', phone: '', message: '' });
    }, 3000);
  };

  return (
    <div className="pt-20">
      {/* Header Section */}
      <section className="relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-br from-[#2d3875] via-[#3A4A9C] to-[#2d3875]" />
        <div className="absolute inset-0 bg-gradient-to-b from-black/10 via-transparent to-black/20" />
        <div className="absolute inset-0 opacity-[0.05]" style={{
          backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
        }} />

        <Container className="relative z-10">
          <div className="py-12 pb-24">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.1 }}
              className="max-w-4xl mx-auto text-center"
            >
              <div className="inline-flex items-center gap-2 px-3 py-1.5 bg-white/10 backdrop-blur-xl rounded-full mb-6 border border-white/20">
                <span className="w-1.5 h-1.5 rounded-full bg-white animate-pulse"></span>
                <span className="text-sm font-semibold text-white">
                  {t('contact.badge', 'Contactez-nous')}
                </span>
              </div>

              <h1 className="text-5xl md:text-6xl font-bold text-white mb-3 leading-tight">
                {t('contact.title', 'Nous Contacter')}
              </h1>

              <motion.nav
                initial={{ opacity: 0, y: -10 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.4, delay: 0.15 }}
                className="mb-8 flex justify-center"
              >
                <ol className="flex items-center gap-2 text-sm">
                  <li className="flex items-center gap-2 group">
                    <Link
                      href="/"
                      className="flex items-center gap-1.5 text-white/80 hover:text-white transition-colors"
                    >
                      <Home className="w-4 h-4" />
                      <span className="font-medium">{t('breadcrumb.home', 'Accueil')}</span>
                    </Link>
                  </li>
                  <li className="text-white/50">
                    <ChevronRight className="w-4 h-4" />
                  </li>
                  <li className="flex items-center gap-2">
                    <span className="text-white font-semibold">{t('breadcrumb.contact', 'Contact')}</span>
                  </li>
                </ol>
              </motion.nav>

              <p className="text-lg text-white/90 max-w-2xl mx-auto">
                {t('contact.subtitle', 'Notre équipe est disponible pour répondre à toutes vos questions')}
              </p>
            </motion.div>
          </div>
        </Container>

        {/* Wave Transition */}
        <div className="absolute bottom-0 left-0 right-0 z-20 pointer-events-none">
          <svg viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-full h-auto" preserveAspectRatio="none">
            <path d="M0,64 C360,96 720,96 1080,64 C1260,48 1350,32 1440,32 L1440,120 L0,120 Z" className="fill-white" />
          </svg>
        </div>
      </section>

      {/* Contact Section */}
      <section className="py-20 bg-white">
        <Container>
          <div className="grid lg:grid-cols-3 gap-12">
            {/* Contact Information */}
            <motion.div
              initial={{ opacity: 0, x: -30 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.6 }}
              className="space-y-8"
            >
              <div>
                <h2 className="text-2xl font-bold text-gray-900 mb-8">
                  {t('contact.info.title', 'Information de Contact')}
                </h2>

                <div className="space-y-6">
                  <div className="flex items-start space-x-4">
                    <div className="w-12 h-12 rounded-full bg-[#3A4A9C]/10 flex items-center justify-center flex-shrink-0">
                      <Phone className="w-6 h-6 text-[#3A4A9C]" />
                    </div>
                    <div>
                      <h3 className="font-semibold text-gray-900 mb-1">
                        {t('contact.info.phone', 'Téléphone')}
                      </h3>
                      <p className="text-gray-600">+212 5XX XXX XXX</p>
                    </div>
                  </div>

                  <div className="flex items-start space-x-4">
                    <div className="w-12 h-12 rounded-full bg-[#3A4A9C]/10 flex items-center justify-center flex-shrink-0">
                      <Mail className="w-6 h-6 text-[#3A4A9C]" />
                    </div>
                    <div>
                      <h3 className="font-semibold text-gray-900 mb-1">
                        {t('contact.info.email', 'Email')}
                      </h3>
                      <p className="text-gray-600">contact@dropex.ma</p>
                    </div>
                  </div>

                  <div className="flex items-start space-x-4">
                    <div className="w-12 h-12 rounded-full bg-[#3A4A9C]/10 flex items-center justify-center flex-shrink-0">
                      <Clock className="w-6 h-6 text-[#3A4A9C]" />
                    </div>
                    <div>
                      <h3 className="font-semibold text-gray-900 mb-1">
                        {t('contact.info.hours', 'Heures d\'ouverture')}
                      </h3>
                      <p className="text-gray-600">
                        {t('contact.info.hoursValue', 'Lun - Sam: 9h00 - 18h00')}
                      </p>
                    </div>
                  </div>
                </div>
              </div>

              {/* Map Placeholder */}
              <div className="rounded-2xl overflow-hidden shadow-lg h-64 bg-gradient-to-br from-[#3A4A9C]/10 to-blue-50 flex items-center justify-center">
                <div className="text-center">
                  <div className="w-16 h-16 rounded-full bg-[#3A4A9C]/20 flex items-center justify-center mx-auto mb-4">
                    <Home className="w-8 h-8 text-[#3A4A9C]" />
                  </div>
                  <p className="text-gray-600 font-medium">Casablanca, Maroc</p>
                </div>
              </div>
            </motion.div>

            {/* Contact Form */}
            <motion.div
              initial={{ opacity: 0, x: 30 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.6, delay: 0.2 }}
              className="lg:col-span-2"
            >
              <div className="bg-gradient-to-br from-gray-50 to-blue-50 rounded-2xl p-8 shadow-xl">
                {submitted ? (
                  <div className="text-center py-16">
                    <CheckCircle className="w-16 h-16 text-green-600 mx-auto mb-4" />
                    <h3 className="text-2xl font-bold text-gray-900 mb-2">
                      {t('contact.form.success', 'Message envoyé avec succès!')}
                    </h3>
                    <p className="text-gray-600">
                      {t('contact.form.successMessage', 'Merci de nous avoir contacté. Nous vous répondrons bientôt.')}
                    </p>
                  </div>
                ) : (
                  <form onSubmit={handleSubmit} className="space-y-6">
                    <div className="grid md:grid-cols-2 gap-6">
                      <Input
                        type="text"
                        label={t('contact.form.name', 'Nom')}
                        value={formData.name}
                        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                        className="bg-white"
                        required
                      />

                      <Input
                        type="email"
                        label={t('contact.form.email', 'Email')}
                        value={formData.email}
                        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                        className="bg-white"
                        required
                      />
                    </div>

                    <Input
                      type="tel"
                      label={t('contact.form.phone', 'Téléphone')}
                      value={formData.phone}
                      onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                      className="bg-white"
                      required
                    />

                    <Textarea
                      label={t('contact.form.message', 'Message')}
                      value={formData.message}
                      onChange={(e) => setFormData({ ...formData, message: e.target.value })}
                      rows={6}
                      className="bg-white"
                      required
                    />

                    <Button type="submit" size="lg" fullWidth className="space-x-2">
                      <Send className="w-5 h-5" />
                      <span>{t('contact.form.send', 'Envoyer')}</span>
                    </Button>
                  </form>
                )}
              </div>
            </motion.div>
          </div>
        </Container>
      </section>
    </div>
  );
}