{% extends "layout.html" %}

{% block title %}Contact - Trade Signals{% endblock %}

{% block content %}
<div class="contact-page">
    <div class="container">
        <div class="contact-content">
            <!-- Page Header -->
            <div class="page-header">
                <h1>Contact Us</h1>
                <p class="page-subtitle">We'd love to hear from you. Send us a message and we'll respond as soon as possible.</p>
            </div>

            <div class="contact-grid">
                <!-- Contact Form Section -->
                <div class="contact-form-section">
                    <h2 class="section-title">Send us a Message</h2>
                    <form method="POST" action="{{ url_for('public.contact') }}" class="contact-form" id="contactForm">
                        <div class="form-group">
                            <label for="full_name">Full Name *</label>
                            <input 
                                type="text" 
                                id="full_name" 
                                name="full_name" 
                                required
                                pattern="[A-Za-z\s]+"
                                title="Only letters and spaces allowed"
                                placeholder="Enter your full name"
                                value="{{ request.form.full_name if request.form }}"
                            >
                        </div>

                        <div class="form-group">
                            <label for="email">Email Address *</label>
                            <input 
                                type="email" 
                                id="email" 
                                name="email" 
                                required
                                placeholder="Enter your email address"
                                value="{{ request.form.email if request.form }}"
                            >
                        </div>

                        <div class="form-group">
                            <label for="message">Message *</label>
                            <textarea 
                                id="message" 
                                name="message" 
                                required
                                rows="6"
                                placeholder="Enter your message here..."
                            >{{ request.form.message if request.form }}</textarea>
                        </div>

                        <div class="form-group">
                            <button type="submit" class="btn btn-primary btn-block">Send Message</button>
                        </div>
                    </form>
                </div>

                <!-- Contact Details Panel -->
                <div class="contact-details-section">
                    <h2 class="section-title">Contact Details</h2>
                    <div class="contact-details-card">
                        <div class="contact-item">
                            <div class="contact-icon"><i data-lucide="mail"></i></div>
                            <div class="contact-info">
                                <h4>Email</h4>
                                <a href="mailto:support@tradesignal.tech">support@tradesignal.tech</a>
                            </div>
                        </div>

                        <div class="contact-item">
                            <div class="contact-icon"><i data-lucide="phone"></i></div>
                            <div class="contact-info">
                                <h4>Phone</h4>
                                <a href="tel:+919000000000">+91-90000-00000</a>
                            </div>
                        </div>

                        <div class="contact-item">
                            <div class="contact-icon"><i data-lucide="map-pin"></i></div>
                            <div class="contact-info">
                                <h4>Location</h4>
                                <p>Pune, India</p>
                            </div>
                        </div>

                        <div class="contact-item">
                            <div class="contact-icon"><i data-lucide="clock"></i></div>
                            <div class="contact-info">
                                <h4>Business Hours</h4>
                                <p>Monday to Friday</p>
                                <p>9:00 AM to 6:00 PM IST</p>
                            </div>
                        </div>
                    </div>

                    <!-- Additional Info -->
                    <div class="contact-note">
                        <p>Our support team is available during business hours to assist you with any queries or concerns.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}