import React, { useState } from 'react';
import { Mail, Phone, MapPin, Send } from 'lucide-react';
import { Button } from '../components/Button';

export const Contact: React.FC = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: '',
    service: 'webdev',
    message: ''
  });
  const [submitted, setSubmitted] = useState(false);

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

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // Simulate API call
    console.log('Form submitted:', formData);
    setSubmitted(true);
    setTimeout(() => setSubmitted(false), 5000);
  };

  return (
    <div className="pt-20 bg-white min-h-screen">
      <div className="bg-gray-900 py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h1 className="text-4xl font-extrabold text-white mb-4">Lépjen velünk kapcsolatba</h1>
          <p className="text-xl text-gray-300 max-w-2xl mx-auto">
            Készen áll arra, hogy megvalósítsa elképzeléseit? Töltse ki az űrlapot, és hamarosan felvesszük Önnel a kapcsolatot!
          </p>
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 -mt-10">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Contact Info Card */}
          <div className="bg-gradient-to-br from-primary to-secondary rounded-2xl shadow-xl p-8 text-white h-fit">
            <h3 className="text-2xl font-bold mb-6">Elérhetőségeink</h3>
            <div className="space-y-6">
              <div className="flex items-start space-x-4">
                <div className="p-3 bg-white/20 rounded-lg">
                  <Phone className="w-6 h-6" />
                </div>
                <div>
                  <p className="text-blue-100 text-sm">Telefon</p>
                  <p className="font-semibold">+36 30 123 4567</p>
                </div>
              </div>
              <div className="flex items-start space-x-4">
                 <div className="p-3 bg-white/20 rounded-lg">
                  <Mail className="w-6 h-6" />
                </div>
                <div>
                  <p className="text-blue-100 text-sm">E-mail</p>
                  <p className="font-semibold">info@motionweb.hu</p>
                </div>
              </div>
              <div className="flex items-start space-x-4">
                 <div className="p-3 bg-white/20 rounded-lg">
                  <MapPin className="w-6 h-6" />
                </div>
                <div>
                  <p className="text-blue-100 text-sm">Iroda</p>
                  <p className="font-semibold">Budapest, Magyarország</p>
                </div>
              </div>
            </div>
          </div>

          {/* Form */}
          <div className="lg:col-span-2 bg-white rounded-2xl shadow-xl border border-gray-100 p-8">
            {submitted ? (
              <div className="h-full flex flex-col items-center justify-center text-center py-10">
                <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
                  <Send className="w-8 h-8 text-green-600" />
                </div>
                <h3 className="text-2xl font-bold text-gray-900 mb-2">Köszönjük megkeresését!</h3>
                <p className="text-gray-600">Munkatársunk hamarosan felveszi Önnel a kapcsolatot a megadott elérhetőségeken.</p>
              </div>
            ) : (
              <form onSubmit={handleSubmit} className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">Név</label>
                    <input
                      type="text"
                      name="name"
                      id="name"
                      required
                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all bg-white text-gray-900"
                      placeholder="Teljes név"
                      value={formData.name}
                      onChange={handleChange}
                    />
                  </div>
                  <div>
                    <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">E-mail cím</label>
                    <input
                      type="email"
                      name="email"
                      id="email"
                      required
                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all bg-white text-gray-900"
                      placeholder="pelda@email.com"
                      value={formData.email}
                      onChange={handleChange}
                    />
                  </div>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                   <div>
                    <label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-1">Telefonszám</label>
                    <input
                      type="tel"
                      name="phone"
                      id="phone"
                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all bg-white text-gray-900"
                      placeholder="+36 30 123 4567"
                      value={formData.phone}
                      onChange={handleChange}
                    />
                  </div>
                   <div>
                    <label htmlFor="service" className="block text-sm font-medium text-gray-700 mb-1">Érdeklődés tárgya</label>
                    <select
                      name="service"
                      id="service"
                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all bg-white text-gray-900"
                      value={formData.service}
                      onChange={handleChange}
                    >
                      <option value="webdev">Egyedi Weboldal</option>
                      <option value="webshop">Webshop</option>
                      <option value="marketing">SEO & Marketing</option>
                      <option value="other">Egyéb</option>
                    </select>
                  </div>
                </div>

                <div>
                  <label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-1">Üzenet</label>
                  <textarea
                    name="message"
                    id="message"
                    rows={4}
                    required
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all bg-white text-gray-900"
                    placeholder="Írja le röviden elképzeléseit..."
                    value={formData.message}
                    onChange={handleChange}
                  ></textarea>
                </div>

                <div className="pt-2">
                  <Button type="submit" size="lg" fullWidth>Ajánlatkérés küldése</Button>
                </div>
              </form>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};