'use client';

import { useState } from 'react';
import { WebsiteData } from '@/lib/hbfc-data';
import { Mail, Phone, MapPin, Send, CheckCircle, Instagram, Facebook, MessageSquare, Clock } from 'lucide-react';

interface ContactSectionProps {
  data: WebsiteData;
}

export function ContactSection({ data }: ContactSectionProps) {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    subject: 'General Inquiry',
    message: '',
  });
  const [sent, setSent] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!formData.name || !formData.email || !formData.message) return;

    setSent(true);
    setTimeout(() => {
      setFormData({
        name: '',
        email: '',
        subject: 'General Inquiry',
        message: '',
      });
    }, 3000);
  };

  return (
    <section id="contact" className="py-16 sm:py-24 relative bg-white border-t border-neutral-200">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section Header */}
        <div className="text-center max-w-3xl mx-auto mb-16">
          <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-emerald-50 border border-emerald-200 text-emerald-800 text-xs font-bold uppercase tracking-widest mb-3">
            <MessageSquare className="w-3.5 h-3.5 text-amber-600" />
            <span>Connect with HBFC</span>
          </div>
          <h2 className="text-3xl sm:text-5xl font-black text-neutral-900 uppercase tracking-tight mb-4">
            Get in Touch
          </h2>
          <p className="text-neutral-600 text-sm sm:text-base max-w-xl mx-auto">
            Have questions about Calabar Walkathon 7.0, the Obudu Mountain Expedition, or membership? Reach out to our secretariat.
          </p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-12 gap-10">
          {/* Contact Details & Socials */}
          <div className="lg:col-span-5 space-y-6">
            <div className="p-6 rounded-2xl bg-neutral-50 border border-neutral-200 shadow-xs space-y-6">
              <h3 className="text-lg font-black text-neutral-900 uppercase tracking-wider">
                Club Secretariat
              </h3>

              <div className="space-y-4 text-sm">
                <a
                  href={`mailto:${data.brand.email}`}
                  className="flex items-start gap-3 text-neutral-600 hover:text-emerald-700 transition-colors group"
                >
                  <div className="p-2.5 rounded-xl bg-white text-emerald-700 border border-neutral-200 group-hover:border-emerald-300 shrink-0 shadow-xs">
                    <Mail className="w-5 h-5" />
                  </div>
                  <div>
                    <span className="text-xs font-bold uppercase text-neutral-500 block">Email Us</span>
                    <span className="font-semibold text-neutral-900 group-hover:text-emerald-700">{data.brand.email}</span>
                  </div>
                </a>

                <a
                  href={`tel:${data.brand.phone.replace(/\s+/g, '')}`}
                  className="flex items-start gap-3 text-neutral-600 hover:text-emerald-700 transition-colors group"
                >
                  <div className="p-2.5 rounded-xl bg-white text-emerald-700 border border-neutral-200 group-hover:border-emerald-300 shrink-0 shadow-xs">
                    <Phone className="w-5 h-5" />
                  </div>
                  <div>
                    <span className="text-xs font-bold uppercase text-neutral-500 block">Call / WhatsApp</span>
                    <span className="font-semibold text-neutral-900 group-hover:text-emerald-700">{data.brand.phone}</span>
                  </div>
                </a>

                <div className="flex items-start gap-3 text-neutral-600">
                  <div className="p-2.5 rounded-xl bg-white text-emerald-700 border border-neutral-200 shrink-0 shadow-xs">
                    <MapPin className="w-5 h-5" />
                  </div>
                  <div>
                    <span className="text-xs font-bold uppercase text-neutral-500 block">Location</span>
                    <span className="font-semibold text-neutral-900">{data.brand.location}</span>
                  </div>
                </div>

                <div className="flex items-start gap-3 text-neutral-600">
                  <div className="p-2.5 rounded-xl bg-white text-amber-700 border border-neutral-200 shrink-0 shadow-xs">
                    <Clock className="w-5 h-5" />
                  </div>
                  <div>
                    <span className="text-xs font-bold uppercase text-neutral-500 block">Weekend Aerofit Sessions</span>
                    <span className="font-semibold text-neutral-900">Saturdays 6:00 AM • U.J. Esuene Complex</span>
                  </div>
                </div>
              </div>

              {/* Social Channels */}
              <div className="pt-6 border-t border-neutral-200">
                <span className="text-xs font-bold uppercase tracking-wider text-neutral-500 block mb-3">
                  Follow Our Social Media
                </span>
                <div className="flex items-center gap-3">
                  <a
                    href={data.brand.instagram}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex-1 py-3 px-4 rounded-xl bg-white border border-neutral-200 hover:border-emerald-300 text-neutral-700 hover:text-neutral-900 flex items-center justify-center gap-2 text-xs font-bold uppercase tracking-wider transition-all shadow-xs"
                  >
                    <Instagram className="w-4 h-4 text-pink-600" />
                    <span>Instagram</span>
                  </a>

                  <a
                    href={data.brand.facebook}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex-1 py-3 px-4 rounded-xl bg-white border border-neutral-200 hover:border-emerald-300 text-neutral-700 hover:text-neutral-900 flex items-center justify-center gap-2 text-xs font-bold uppercase tracking-wider transition-all shadow-xs"
                  >
                    <Facebook className="w-4 h-4 text-blue-600" />
                    <span>Facebook</span>
                  </a>
                </div>
              </div>
            </div>
          </div>

          {/* Contact Message Form */}
          <div className="lg:col-span-7">
            <div className="p-6 sm:p-8 rounded-2xl bg-neutral-50 border border-neutral-200 shadow-xs">
              <h3 className="text-lg font-black text-neutral-900 uppercase tracking-wider mb-6">
                Send Us a Message
              </h3>

              {sent ? (
                <div className="p-6 rounded-2xl bg-emerald-50 border border-emerald-300 text-center space-y-2">
                  <CheckCircle className="w-10 h-10 text-emerald-600 mx-auto" />
                  <h4 className="text-lg font-bold text-neutral-900">Message Received!</h4>
                  <p className="text-xs text-neutral-600">
                    Thank you for reaching out to Healthy Billionaires Fitness Club. Our administrative team will respond promptly.
                  </p>
                </div>
              ) : (
                <form onSubmit={handleSubmit} className="space-y-4">
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                      <label className="block text-xs font-bold uppercase tracking-wider text-neutral-700 mb-1.5">
                        Your Name *
                      </label>
                      <input
                        type="text"
                        required
                        value={formData.name}
                        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                        placeholder="e.g. Chief Orok"
                        className="w-full px-4 py-2.5 rounded-xl bg-white border border-neutral-300 focus:border-emerald-500 focus:outline-none text-neutral-900 text-sm shadow-xs"
                      />
                    </div>

                    <div>
                      <label className="block text-xs font-bold uppercase tracking-wider text-neutral-700 mb-1.5">
                        Your Email *
                      </label>
                      <input
                        type="email"
                        required
                        value={formData.email}
                        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                        placeholder="you@domain.com"
                        className="w-full px-4 py-2.5 rounded-xl bg-white border border-neutral-300 focus:border-emerald-500 focus:outline-none text-neutral-900 text-sm shadow-xs"
                      />
                    </div>
                  </div>

                  <div>
                    <label className="block text-xs font-bold uppercase tracking-wider text-neutral-700 mb-1.5">
                      Subject
                    </label>
                    <select
                      value={formData.subject}
                      onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
                      className="w-full px-4 py-2.5 rounded-xl bg-white border border-neutral-300 focus:border-emerald-500 focus:outline-none text-neutral-900 text-sm shadow-xs"
                    >
                      <option value="Calabar Walkathon 7.0">Calabar Walkathon 7.0 Inquiry</option>
                      <option value="OMR Expedition">OMR Mountain Expedition</option>
                      <option value="Club Membership">Membership Application</option>
                      <option value="Corporate Partnership">Corporate Partnership / Sponsorship</option>
                      <option value="Community Outreach">Community Outreach Proposal</option>
                      <option value="General Inquiry">General Inquiry</option>
                    </select>
                  </div>

                  <div>
                    <label className="block text-xs font-bold uppercase tracking-wider text-neutral-700 mb-1.5">
                      Message *
                    </label>
                    <textarea
                      required
                      rows={4}
                      value={formData.message}
                      onChange={(e) => setFormData({ ...formData, message: e.target.value })}
                      placeholder="Type your message or inquiry here..."
                      className="w-full px-4 py-2.5 rounded-xl bg-white border border-neutral-300 focus:border-emerald-500 focus:outline-none text-neutral-900 text-sm resize-none shadow-xs"
                    />
                  </div>

                  <button
                    id="contact-submit-btn"
                    type="submit"
                    className="w-full sm:w-auto px-8 py-3 rounded-xl font-bold text-xs uppercase tracking-wider bg-emerald-600 hover:bg-emerald-700 text-white shadow-xs flex items-center justify-center gap-2 cursor-pointer transition-all"
                  >
                    <span>Send Message</span>
                    <Send className="w-3.5 h-3.5" />
                  </button>
                </form>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}