import React, { useState } from 'react';
import FadeIn from '../components/FadeIn.tsx';

const ContactPage: React.FC = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: '',
    subject: '',
    message: '',
  });

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

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    // In a real application, this would integrate with a backend service like EmailJS or a custom API.
    alert(`Thank you for your message, ${formData.name}! We will get back to you shortly. (This is a demo)`);
    setFormData({ name: '', email: '', phone: '', subject: '', message: '' });
  };

  return (
    <div className="bg-white">
      {/* Page Header */}
      <div className="relative bg-gray-800 py-32 sm:py-40">
        <img
            src="https://images.unsplash.com/photo-1534536281715-e28d76689b4d?q=80&w=2070&auto=format&fit=crop"
            alt="Contact us concept"
            className="absolute inset-0 w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-secondary bg-opacity-70"></div>
        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <FadeIn>
            <h1 className="text-4xl font-bold uppercase text-white">Contact Us</h1>
            <p className="mt-4 text-xl text-gray-200">We're here to help. Reach out to us anytime.</p>
          </FadeIn>
        </div>
      </div>

      {/* Contact Section */}
      <section className="py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <FadeIn>
            <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
              {/* Contact Details */}
              <div className="lg:col-span-1 space-y-8">
                <div>
                  <h3 className="text-xl font-semibold text-secondary">Address</h3>
                  <p className="mt-2 text-gray-600">Opposite Primus Hybrid School, Spintex Road, just before Hydrofoam Estates. Accra, Ghana.</p>
                </div>
                <div>
                  <h3 className="text-xl font-semibold text-secondary">Phone</h3>
                  <p className="mt-2 text-gray-600">0544 344 129</p>
                  <p className="mt-1 text-gray-600">0545 847 479</p>
                </div>
                <div>
                  <h3 className="text-xl font-semibold text-secondary">Email</h3>
                  <a href="mailto:nexthorizonrealty@gmail.com" className="mt-2 text-primary hover:underline">
                    nexthorizonrealty@gmail.com
                  </a>
                </div>
              </div>

              {/* Contact Form */}
              <div className="lg:col-span-2">
                <h2 className="text-2xl font-bold text-secondary mb-6">Send Us a Message</h2>
                <form onSubmit={handleSubmit} className="space-y-6">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <input type="text" name="name" placeholder="Your Name" required value={formData.name} onChange={handleChange} className="w-full px-4 py-3 border border-gray-300 rounded-md focus:ring-primary focus:border-primary" />
                    <input type="email" name="email" placeholder="Your Email" required value={formData.email} onChange={handleChange} className="w-full px-4 py-3 border border-gray-300 rounded-md focus:ring-primary focus:border-primary" />
                  </div>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <input type="tel" name="phone" placeholder="Your Phone" value={formData.phone} onChange={handleChange} className="w-full px-4 py-3 border border-gray-300 rounded-md focus:ring-primary focus:border-primary" />
                    <input type="text" name="subject" placeholder="Subject" required value={formData.subject} onChange={handleChange} className="w-full px-4 py-3 border border-gray-300 rounded-md focus:ring-primary focus:border-primary" />
                  </div>
                  <div>
                    <textarea name="message" placeholder="Your Message" rows={5} required value={formData.message} onChange={handleChange} className="w-full px-4 py-3 border border-gray-300 rounded-md focus:ring-primary focus:border-primary"></textarea>
                  </div>
                  <div>
                    <button type="submit" className="bg-primary text-white px-8 py-3 rounded-md font-semibold hover:bg-opacity-80 transition-all duration-300 transform hover:scale-105">
                      Submit Message
                    </button>
                  </div>
                </form>
              </div>
            </div>
          </FadeIn>
        </div>
      </section>
      
      {/* Google Map */}
      <FadeIn>
        <div className="w-full">
          <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3970.474668547477!2d-0.0913916856911142!3d5.644170995914616!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xfdf853c05f7783d%3A0x6335957d174624b4!2sPrimus%20Hybrid%20School!5e0!3m2!1sen!2sgh!4v1672583849123!5m2!1sen!2sgh"
            width="100%"
            height="450"
            style={{ border: 0 }}
            allowFullScreen={true}
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
            title="Next Horizon Realty Location"
          ></iframe>
        </div>
      </FadeIn>
    </div>
  );
};

export default ContactPage;