import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';

const App = () => {
    // State for mobile menu
    const [menuOpen, setMenuOpen] = useState(false);

    // State for form fields
    const [formData, setFormData] = useState({
        name: '',
        email: '',
        message: ''
    });

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

    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        const { name, email, message } = formData;

        const subject = `İletişim Formu Mesajı: ${name}`;
        const body = `
Gönderen Adı: ${name}
Gönderen E-posta: ${email}

Mesaj:
${message}
        `.trim();

        // Create a mailto link to open the user's default email client
        const mailtoLink = `mailto:kaanbulbul@gmail.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;

        // Open the email client
        window.location.href = mailtoLink;
        
        // Reset form after attempting to open mail client
        setFormData({ name: '', email: '', message: '' });
    };
    
    return (
        <>
            {/* Header */}
            <header className="header">
                <div className="container">
                    <nav className="navbar">
                        <a href="index.html" className="logo">
                            {/* Assuming logo.png is in the public folder */}
                            <img src="logo.png" alt="METU YAPI KİMYA Logo" className="logo-img" />
                        </a>
                        <ul className={`nav-links ${menuOpen ? 'active' : ''}`}>
                            <li><a href="hakkinda.html">Hakkında</a></li>
                            <li><a href="hizmetler.html">Hizmetler</a></li>
                            <li><a href="urunler.html">Ürünler</a></li>
                            <li><a href="iletisim.html" className="active">İletişim</a></li>
                        </ul>
                        <button className={`hamburger ${menuOpen ? 'active' : ''}`} onClick={() => setMenuOpen(!menuOpen)} aria-label="Menüyü aç/kapat" aria-expanded={menuOpen}>
                            <span className="bar"></span>
                            <span className="bar"></span>
                            <span className="bar"></span>
                        </button>
                    </nav>
                </div>
            </header>

            {/* Main Content */}
            <main>
                <section id="iletisim-content">
                    <div className="container">
                        <h2>Bize Ulaşın</h2>
                        <div className="contact-info-wrapper">
                            <div className="contact-info">
                                <h3>İletişim Bilgileri</h3>
                                <p><strong>Adres:</strong> YENİ MAH. İNCİRLİK BUL. NO:25-HAH SARIÇAM / ADANA / TÜRKİYE 01340</p>
                                <p><strong>Telefon:</strong> +90 532 724 41 71</p>
                                <p><strong>E-posta:</strong> info@metuyapikimya.com.tr</p>
                            </div>
                            <form className="contact-form" onSubmit={handleSubmit}>
                                <h3>Mesaj Gönderin</h3>
                                <div className="form-group">
                                    <label htmlFor="name">Adınız</label>
                                    <input type="text" id="name" name="name" placeholder="Adınız" value={formData.name} onChange={handleInputChange} required />
                                </div>
                                <div className="form-group">
                                    <label htmlFor="email">E-posta Adresiniz</label>
                                    <input type="email" id="email" name="email" placeholder="E-posta Adresiniz" value={formData.email} onChange={handleInputChange} required />
                                </div>
                                <div className="form-group">
                                     <label htmlFor="message">Mesajınız</label>
                                    <textarea id="message" name="message" rows={6} placeholder="Mesajınız" value={formData.message} onChange={handleInputChange} required></textarea>
                                </div>
                                <button type="submit">Gönder</button>
                            </form>
                        </div>
                    </div>
                </section>
            </main>

            {/* Footer */}
            <footer className="footer">
                <div className="container">
                   <p>&copy; 2024 Metu Yapı Kimya San. ve Tic. Ltd. Şti. Tüm Hakları Saklıdır.</p>
                </div>
            </footer>
        </>
    );
};

const container = document.getElementById('root');
if (container) {
    const root = createRoot(container);
    root.render(<App />);
}