[ Mini Kiebo ]

Server: Windows NT AKFAR_SERVER 10.0 build 26200 (Windows 10) AMD64 Path: D:/xampp/htdocs/dummyweb/app/frontend/src/components/Sections/ [ Home ]
File: ContactSection.jsx
Action: file_editor create /app/frontend/src/components/sections/ContactSection.jsx --file-text "import React from 'react';
import { useLanguage } from '../../contexts/LanguageContext';
import { Card, CardContent } from '../ui/card';
import { Mail, Phone, MapPin, Clock } from 'lucide-react';
import { Button } from '../ui/button';
import { Input } from '../ui/input';
import { Textarea } from '../ui/textarea';
import mockData from '../../mockData';

const ContactSection = () => {
  const { t } = useLanguage();

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(t('Terima kasih! Pesan Anda telah dikirim.', 'Thank you! Your message has been sent.'));
  };

  return (
    <section id=\"contact\" className=\"py-20 bg-white\">
      <div className=\"container mx-auto px-4\">
        {/* Section Header */}
        <div className=\"text-center mb-16\">
          <h2 className=\"text-3xl md:text-4xl font-bold text-gray-900 mb-4\">
            {t('Hubungi Kami', 'Contact Us')}
          </h2>
          <p className=\"text-lg text-gray-600 max-w-2xl mx-auto\">
            {t(
              'Ada pertanyaan? Kami siap membantu Anda. Hubungi kami melalui formulir atau informasi kontak di bawah ini',
              'Have questions? We are ready to help you. Contact us through the form or contact information below'
            )}
          </p>
          <div className=\"w-24 h-1 bg-gradient-to-r from-emerald-600 to-teal-500 mx-auto mt-4 rounded-full\"></div>
        </div>

        <div className=\"grid lg:grid-cols-2 gap-12 max-w-6xl mx-auto\">
          {/* Contact Information */}
          <div>
            <h3 className=\"text-2xl font-bold text-gray-900 mb-6\">
              {t('Informasi Kontak', 'Contact Information')}
            </h3>
            <p className=\"text-gray-600 mb-8 leading-relaxed\">
              {t(
                'Silakan hubungi kami melalui salah satu cara berikut. Tim kami akan dengan senang hati membantu Anda.',
                'Please contact us through one of the following ways. Our team will be happy to help you.'
              )}
            </p>

            <div className=\"space-y-6\">
              {/* Address */}
              <Card className=\"border-l-4 border-emerald-600 shadow-lg hover:shadow-xl transition-shadow\">
                <CardContent className=\"p-6\">
                  <div className=\"flex items-start gap-4\">
                    <div className=\"w-12 h-12 bg-gradient-to-br from-emerald-500 to-teal-400 rounded-lg flex items-center justify-center flex-shrink-0\">
                      <MapPin className=\"h-6 w-6 text-white\" />
                    </div>
                    <div>
                      <h4 className=\"font-semibold text-gray-900 mb-2\">
                        {t('Alamat', 'Address')}
                      </h4>
                      <p className=\"text-gray-600 leading-relaxed\">
                        {t(mockData.contact.address_id, mockData.contact.address_en)}
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>

              {/* Phone */}
              <Card className=\"border-l-4 border-teal-600 shadow-lg hover:shadow-xl transition-shadow\">
                <CardContent className=\"p-6\">
                  <div className=\"flex items-start gap-4\">
                    <div className=\"w-12 h-12 bg-gradient-to-br from-teal-500 to-emerald-400 rounded-lg flex items-center justify-center flex-shrink-0\">
                      <Phone className=\"h-6 w-6 text-white\" />
                    </div>
                    <div>
                      <h4 className=\"font-semibold text-gray-900 mb-2\">
                        {t('Telepon', 'Phone')}
                      </h4>
                      <a 
                        href={`tel:${mockData.contact.phone}`}
                        className=\"text-emerald-600 hover:text-emerald-700 font-medium\"
                      >
                        {mockData.contact.phone}
                      </a>
                    </div>
                  </div>
                </CardContent>
              </Card>

              {/* Email */}
              <Card className=\"border-l-4 border-emerald-600 shadow-lg hover:shadow-xl transition-shadow\">
                <CardContent className=\"p-6\">
                  <div className=\"flex items-start gap-4\">
                    <div className=\"w-12 h-12 bg-gradient-to-br from-emerald-500 to-teal-400 rounded-lg flex items-center justify-center flex-shrink-0\">
                      <Mail className=\"h-6 w-6 text-white\" />
                    </div>
                    <div>
                      <h4 className=\"font-semibold text-gray-900 mb-2\">
                        {t('Email', 'Email')}
                      </h4>
                      <a 
                        href={`mailto:${mockData.contact.email}`}
                        className=\"text-emerald-600 hover:text-emerald-700 font-medium\"
                      >
                        {mockData.contact.email}
                      </a>
                    </div>
                  </div>
                </CardContent>
              </Card>

              {/* Working Hours */}
              <Card className=\"border-l-4 border-teal-600 shadow-lg hover:shadow-xl transition-shadow\">
                <CardContent className=\"p-6\">
                  <div className=\"flex items-start gap-4\">
                    <div className=\"w-12 h-12 bg-gradient-to-br from-teal-500 to-emerald-400 rounded-lg flex items-center justify-center flex-shrink-0\">
                      <Clock className=\"h-6 w-6 text-white\" />
                    </div>
                    <div>
                      <h4 className=\"font-semibold text-gray-900 mb-2\">
                        {t('Jam Operasional', 'Working Hours')}
                      </h4>
                      <p className=\"text-gray-600\">
                        {t(mockData.contact.workingHours_id, mockData.contact.workingHours_en)}
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>

          {/* Contact Form */}
          <div>
            <Card className=\"shadow-2xl border-0\">
              <CardContent className=\"p-8\">
                <h3 className=\"text-2xl font-bold text-gray-900 mb-6\">
                  {t('Kirim Pesan', 'Send Message')}
                </h3>
                <form onSubmit={handleSubmit} className=\"space-y-6\">
                  <div>
                    <label className=\"block text-sm font-medium text-gray-700 mb-2\">
                      {t('Nama Lengkap', 'Full Name')} *
                    </label>
                    <Input 
                      type=\"text\" 
                      required 
                      placeholder={t('Masukkan nama lengkap Anda', 'Enter your full name')}
                      className=\"w-full\"
                    />
                  </div>

                  <div>
                    <label className=\"block text-sm font-medium text-gray-700 mb-2\">
                      {t('Email', 'Email')} *
                    </label>
                    <Input 
                      type=\"email\" 
                      required 
                      placeholder={t('Masukkan email Anda', 'Enter your email')}
                      className=\"w-full\"
                    />
                  </div>

                  <div>
                    <label className=\"block text-sm font-medium text-gray-700 mb-2\">
                      {t('Nomor Telepon', 'Phone Number')}
                    </label>
                    <Input 
                      type=\"tel\" 
                      placeholder={t('Masukkan nomor telepon Anda', 'Enter your phone number')}
                      className=\"w-full\"
                    />
                  </div>

                  <div>
                    <label className=\"block text-sm font-medium text-gray-700 mb-2\">
                      {t('Pesan', 'Message')} *
                    </label>
                    <Textarea 
                      required 
                      rows={5}
                      placeholder={t('Tulis pesan Anda di sini...', 'Write your message here...')}
                      className=\"w-full resize-none\"
                    />
                  </div>

                  <Button 
                    type=\"submit\"
                    className=\"w-full bg-gradient-to-r from-emerald-600 to-teal-500 hover:from-emerald-700 hover:to-teal-600 text-base py-6\"
                  >
                    {t('Kirim Pesan', 'Send Message')}
                  </Button>
                </form>
              </CardContent>
            </Card>
          </div>
        </div>

        {/* Map Section */}
        <div className=\"mt-16 max-w-6xl mx-auto\">
          <Card className=\"overflow-hidden border-0 shadow-2xl\">
            <div className=\"relative h-96 bg-gray-200\">
              <iframe
                src=\"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3960.798392536947!2d107.63705731477368!3d-6.914744995012344!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e68e7c381e3c323%3A0x5f5160f6c9796e4b!2sBandung%2C%20West%20Java%2C%20Indonesia!5e0!3m2!1sen!2sid!4v1234567890\"
                width=\"100%\"
                height=\"100%\"
                style={{ border: 0 }}
                allowFullScreen=\"\"
                loading=\"lazy\"
                referrerPolicy=\"no-referrer-when-downgrade\"
                title=\"Location Map\"
              ></iframe>
            </div>
          </Card>
        </div>
      </div>
    </section>
  );
};

export default ContactSection;
"
Observation: Create successful: /app/frontend/src/components/sections/ContactSection.jsx