import React, { useState } from 'react';
import { Phone, Mail, MapPin, Send } from 'lucide-react';
import AnimatedSection from './AnimatedSection';
import { cn } from '@/lib/utils';

const Contact: React.FC = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // In a real app, you would handle form submission here
    console.log({ name, email, message });
    setSubmitted(true);
    // Reset form
    setName('');
    setEmail('');
    setMessage('');
    // After 3 seconds, hide the success message
    setTimeout(() => setSubmitted(false), 3000);
  };

  return (
    <section id="kontak" className="section-padding bg-slate-50">
      <div className="max-w-7xl mx-auto">
        <AnimatedSection className="text-center mb-16">
          <h2 className="text-3xl md:text-4xl font-bold mb-4">Hubungi Kami</h2>
          <p className="text-muted-foreground max-w-2xl mx-auto">
            Jangan ragu untuk menghubungi kami jika Anda memiliki pertanyaan atau
            ingin konsultasi mengenai kebutuhan teknologi informasi untuk bisnis Anda.
          </p>
        </AnimatedSection>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
          <AnimatedSection direction="left">
            <div className="bg-white rounded-2xl p-8 shadow-soft h-full">
              <h3 className="text-2xl font-bold mb-6">Informasi Kontak</h3>
              
              <div className="space-y-6">
                <div className="flex items-start">
                  <div className="rounded-full bg-blue-50 p-3 mr-4">
                    <MapPin className="h-6 w-6 text-java-blue" />
                  </div>
                  <div>
                    <h4 className="font-medium mb-1">Alamat</h4>
                    <p className="text-muted-foreground">
                      Jl. Lamtoro Tidar Baru RT002 RW012, Kelurahan Magersari, 
                      Kecamatan Magelang Selatan, Kota Magelang, 56126
                    </p>
                  </div>
                </div>
                
                <div className="flex items-start">
                  <div className="rounded-full bg-blue-50 p-3 mr-4">
                    <Phone className="h-6 w-6 text-java-blue" />
                  </div>
                  <div>
                    <h4 className="font-medium mb-1">Telepon</h4>
                    <p className="text-muted-foreground">085713553776</p>
                  </div>
                </div>
                
                <div className="flex items-start">
                  <div className="rounded-full bg-blue-50 p-3 mr-4">
                    <Mail className="h-6 w-6 text-java-blue" />
                  </div>
                  <div>
                    <h4 className="font-medium mb-1">Email</h4>
                    <p className="text-muted-foreground">info@javatekno.id</p>
                  </div>
                </div>
              </div>
              
              <div className="mt-10">
                <iframe 
                  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3956.1530337998444!2d110.21299901531961!3d-7.4544203947273975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e7a8f4f4d5c6f9f%3A0x8d2e7c5b48a42c7e!2sMagelang%2C%20Kota%20Magelang%2C%20Jawa%20Tengah!5e0!3m2!1sid!2sid!4v1653995567087!5m2!1sid!2sid" 
                  className="w-full h-64 rounded-lg border-0" 
                  style={{ border: 0 }}
                  allowFullScreen 
                  loading="lazy" 
                  referrerPolicy="no-referrer-when-downgrade"
                  title="Google Maps - Lokasi PT Java Tekno Plus"
                ></iframe>
              </div>
            </div>
          </AnimatedSection>
          
          <AnimatedSection direction="right" delay={200}>
            <div className="bg-white rounded-2xl p-8 shadow-soft">
              <h3 className="text-2xl font-bold mb-6">Kirim Pesan</h3>
              
              <form onSubmit={handleSubmit} className="space-y-6">
                <div>
                  <label htmlFor="name" className="block text-sm font-medium text-foreground mb-2">
                    Nama Lengkap
                  </label>
                  <input 
                    type="text" 
                    id="name"
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                    className="w-full px-4 py-3 rounded-lg border border-slate-200 focus:border-java-blue focus:ring-1 focus:ring-java-blue outline-none transition-all"
                    placeholder="Masukkan nama Anda"
                    required
                  />
                </div>
                
                <div>
                  <label htmlFor="email" className="block text-sm font-medium text-foreground mb-2">
                    Email
                  </label>
                  <input 
                    type="email" 
                    id="email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    className="w-full px-4 py-3 rounded-lg border border-slate-200 focus:border-java-blue focus:ring-1 focus:ring-java-blue outline-none transition-all"
                    placeholder="Masukkan email Anda"
                    required
                  />
                </div>
                
                <div>
                  <label htmlFor="message" className="block text-sm font-medium text-foreground mb-2">
                    Pesan
                  </label>
                  <textarea 
                    id="message"
                    value={message}
                    onChange={(e) => setMessage(e.target.value)}
                    rows={5}
                    className="w-full px-4 py-3 rounded-lg border border-slate-200 focus:border-java-blue focus:ring-1 focus:ring-java-blue outline-none transition-all"
                    placeholder="Tulis pesan Anda di sini"
                    required
                  ></textarea>
                </div>
                
                <button 
                  type="submit"
                  className="btn-hover bg-java-blue text-white px-8 py-3 rounded-lg font-medium inline-flex items-center"
                >
                  <Send className="h-5 w-5 mr-2" /> Kirim Pesan
                </button>
                
                <div 
                  className={cn(
                    "mt-4 py-3 px-4 bg-green-50 text-green-800 rounded-lg transition-all duration-300",
                    submitted ? "opacity-100" : "opacity-0"
                  )}
                >
                  Terima kasih! Pesan Anda telah terkirim.
                </div>
              </form>
            </div>
          </AnimatedSection>
        </div>
      </div>
    </section>
  );
};

export default Contact;