'use client';

import React, { useState } from 'react';
import getInTouchImg from '../../public/get-in-touch.png';
import { toast } from '@/context/ToastContext';
import { apiRequest } from '@/lib/api';
import { Send, Mail, MessageSquare, Sparkles, Clock, CheckCircle2 } from 'lucide-react';

export default function GetInTouchSection() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [subject, setSubject] = useState('');
  const [message, setMessage] = useState('');
  const [submitting, setSubmitting] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!name.trim() || !email.trim() || !subject.trim() || !message.trim()) {
      toast.error('Please fill in all required fields.');
      return;
    }

    setSubmitting(true);
    try {
      const res = await apiRequest('/contact', {
        method: 'POST',
        body: JSON.stringify({
          name: name.trim(),
          email: email.trim(),
          subject: subject.trim(),
          message: message.trim(),
        }),
      });

      setSubmitting(false);

      if (res.success) {
        toast.success(res.message || 'Thank you! Your message has been sent successfully.');
        setName('');
        setEmail('');
        setSubject('');
        setMessage('');
      } else {
        toast.error(res.error || 'Failed to submit message. Please try again.');
      }
    } catch {
      setSubmitting(false);
      toast.error('An unexpected error occurred. Please try again.');
    }
  };

  return (
    <section id="contact" className="w-full bg-linear-to-b from-white via-amber-50/30 to-white py-16 sm:py-24 relative overflow-hidden">
      {/* Ambient Decorative Light Glow */}
      <div className="absolute top-1/3 left-10 w-96 h-96 bg-[#FECE00]/10 rounded-full blur-3xl pointer-events-none" />

      <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        {/* Section Header Above Card */}
        <div className="text-center mb-12 sm:mb-16">
          <div className="inline-block mb-3 transform hover:scale-105 transition-transform duration-300">
            <span className="font-courgette bg-[#FECE00] text-black text-2xl sm:text-3xl md:text-4xl px-8 py-2 rounded-xs inline-block font-normal shadow-xs border border-amber-300">
              Contact Us
            </span>
          </div>
          <p className="font-sans text-xs sm:text-sm md:text-base text-gray-600 font-medium mt-3 max-w-2xl mx-auto leading-relaxed">
            Have questions or need assistance? Get in touch with us anytime—we&apos;re here to guide and support you on your German learning journey!
          </p>
        </div>

        {/* Combined Card Container with Split Layout */}
        <div className="bg-white rounded-3xl shadow-2xl border border-gray-100/80 overflow-hidden flex flex-col lg:flex-row">
          {/* Left Side: Contact Form */}
          <div className="w-full lg:w-1/2 p-8 sm:p-12 flex flex-col justify-center bg-linear-to-br from-white via-amber-50/20 to-white">
            {/* Cursive Heading matching reference image */}
            <div className="flex items-center gap-2 mb-2">
              <span className="px-3 py-1 rounded-full bg-amber-100 text-amber-900 text-[11px] font-black uppercase tracking-wider flex items-center gap-1">
                <Sparkles className="w-3 h-3 text-amber-600" />
                <span>We&apos;re Here To Help</span>
              </span>
            </div>

            <h2 className="font-courgette text-3xl sm:text-4xl md:text-5xl text-black font-normal mb-3 tracking-tight">
              Get In Touch
            </h2>
            <p className="font-sans text-xs sm:text-sm text-gray-500 font-medium leading-relaxed mb-8">
              Fill out the form below and our team will get back to you as soon as possible.
            </p>

            <form onSubmit={handleSubmit} className="space-y-4">
              <div>
                <input
                  type="text"
                  required
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  placeholder="Your Name"
                  className="w-full px-5 py-3.5 rounded-2xl bg-gray-50/90 border border-gray-200 text-xs sm:text-sm text-gray-900 placeholder-gray-400 focus:bg-white focus:border-[#FECE00] focus:ring-4 focus:ring-[#FECE00]/15 outline-none transition-all duration-200 font-medium"
                />
              </div>

              <div>
                <input
                  type="email"
                  required
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="Your Email Address"
                  className="w-full px-5 py-3.5 rounded-2xl bg-gray-50/90 border border-gray-200 text-xs sm:text-sm text-gray-900 placeholder-gray-400 focus:bg-white focus:border-[#FECE00] focus:ring-4 focus:ring-[#FECE00]/15 outline-none transition-all duration-200 font-medium"
                />
              </div>

              <div>
                <input
                  type="text"
                  required
                  value={subject}
                  onChange={(e) => setSubject(e.target.value)}
                  placeholder="Your Subject"
                  className="w-full px-5 py-3.5 rounded-2xl bg-gray-50/90 border border-gray-200 text-xs sm:text-sm text-gray-900 placeholder-gray-400 focus:bg-white focus:border-[#FECE00] focus:ring-4 focus:ring-[#FECE00]/15 outline-none transition-all duration-200 font-medium"
                />
              </div>

              <div>
                <textarea
                  rows={4}
                  required
                  value={message}
                  onChange={(e) => setMessage(e.target.value)}
                  placeholder="Message"
                  className="w-full p-5 rounded-2xl bg-gray-50/90 border border-gray-200 text-xs sm:text-sm text-gray-900 placeholder-gray-400 focus:bg-white focus:border-[#FECE00] focus:ring-4 focus:ring-[#FECE00]/15 outline-none transition-all duration-200 font-medium resize-none"
                />
              </div>

              {/* Response Time Indicator */}
              {/* <div className="flex items-center gap-4 text-xs text-gray-500 font-medium py-1">
                <span className="flex items-center gap-1">
                  <Clock className="w-3.5 h-3.5 text-amber-500" />
                  <span>24h Fast Response</span>
                </span>
                <span className="flex items-center gap-1">
                  <CheckCircle2 className="w-3.5 h-3.5 text-emerald-500" />
                  <span>Direct Support</span>
                </span>
              </div> */}

              <button
                type="submit"
                disabled={submitting}
                className="w-full py-3.5 px-4 rounded-xl bg-[#FECE00] hover:bg-black text-black hover:text-[#FECE00] font-extrabold text-sm uppercase tracking-wider shadow-md hover:shadow-lg transition-all active:scale-95 group disabled:opacity-50 mt-2 flex items-center justify-center gap-2"
              >
                <span>{submitting ? 'Submitting...' : 'SUBMIT NOW'}</span>
                <Send className="w-4 h-4 text-black group-hover:text-[#FECE00] transition-colors" />
              </button>
            </form>
          </div>

          {/* Right Side: Black Background Showcase Card with get-in-touch image */}
          <div className="w-full lg:w-1/2 bg-[#0B0F17] p-8 sm:p-12 flex items-center justify-center relative overflow-hidden min-h-[380px] sm:min-h-[480px]">
            {/* Ambient Gold Glow Behind Image */}
            <div className="absolute w-72 h-72 bg-[#FECE00]/15 rounded-full blur-3xl pointer-events-none" />

            <div className="relative w-full max-w-[440px] flex items-center justify-center transform hover:scale-105 transition-transform duration-500">
              <img
                src={getInTouchImg.src}
                alt="Apka German School Mobile App Introduce Yourself Preview"
                className="w-full max-h-[540px] h-auto object-contain filter drop-shadow-2xl select-none relative z-10"
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}