'use client';

import { useState } from 'react';
import Button from '@/components/ui/Button';
import Input from '@/components/ui/Input';
import { Mail, MapPin, Phone } from 'lucide-react';

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

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    alert('Thank you! We will get back to you within 24 hours.');
  };

  return (
    <section data-vula-section="getintouch" id="contact" className="bg-white py-20 px-4">
      <div className="max-w-6xl mx-auto">
        <div className="text-center mb-12">
          <h2 className="text-4xl md:text-5xl font-bold text-[#210d0d] font-sans">
            Get in touch
          </h2>
          <p className="text-lg text-[#210d0d]/70 italic font-serif max-w-xl mx-auto mt-3">
            Let us craft your perfect Maasai Mara experience.
          </p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
          {/* Contact Form */}
          <div className="bg-[#f9f4f4] rounded-2xl shadow-md p-8">
            <form onSubmit={handleSubmit} className="space-y-5">
              <Input
                label="Your Name"
                type="text"
                value={name}
                onChange={(e) => setName(e.target.value)}
                required
              />
              <Input
                label="Email Address"
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
              />
              <div>
                <label className="block text-sm font-medium text-[#210d0d] mb-1">Message</label>
                <textarea
                  value={message}
                  onChange={(e) => setMessage(e.target.value)}
                  rows={4}
                  required
                  className="w-full rounded-lg border border-[#e2d4d4] bg-white px-4 py-3 text-sm text-[#210d0d] placeholder:text-[#210d0d]/40 focus:outline-none focus:ring-2 focus:ring-[#dc2626]"
                  placeholder="Tell us about your stay preferences..."
                />
              </div>
              <Button variant="default" size="lg" type="submit" className="w-full">
                Send Message
              </Button>
            </form>
          </div>

          {/* Contact Details & Map */}
          <div className="space-y-8">
            <div className="space-y-4">
              <div className="flex items-start gap-4">
                <Phone className="w-5 h-5 mt-1 text-[#0f52ba]" />
                <div>
                  <p className="font-semibold text-[#210d0d]">WhatsApp / Phone</p>
                  <p className="text-[#210d0d]/70">+254 700 123456</p>
                </div>
              </div>
              <div className="flex items-start gap-4">
                <Mail className="w-5 h-5 mt-1 text-[#0f52ba]" />
                <div>
                  <p className="font-semibold text-[#210d0d]">Email</p>
                  <p className="text-[#210d0d]/70">info@masaisuites.com</p>
                </div>
              </div>
              <div className="flex items-start gap-4">
                <MapPin className="w-5 h-5 mt-1 text-[#0f52ba]" />
                <div>
                  <p className="font-semibold text-[#210d0d]">Location</p>
                  <p className="text-[#210d0d]/70">Maasai Mara National Reserve, Kenya</p>
                </div>
              </div>
            </div>

            {/* Embedded Map */}
            <div className="rounded-2xl overflow-hidden shadow-md h-64 bg-[#f9f4f4]">
              <iframe
                title="Masai Suites Location"
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d127630.563580674!2d35.0!3d-1.5833!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x182a1a1a1a1a1a1%3A0x0!2sMaasai%20Mara%20National%20Reserve!5e0!3m2!1sen!2ske!4v123456789"
                width="100%"
                height="100%"
                style={{ border: 0 }}
                allowFullScreen
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}