<?php
$page_title = 'Contact';
require_once __DIR__ . '/core/bootstrap.php';
include __DIR__ . '/templates/header.php';

// Handle form submission
$form_status = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['contact_form'])) {
    $name = htmlspecialchars($_POST['name'] ?? '');
    $email = filter_var($_POST['email'] ?? '', FILTER_VALIDATE_EMAIL);
    $phone = htmlspecialchars($_POST['phone'] ?? '');
    $company = htmlspecialchars($_POST['company'] ?? '');
    $message = htmlspecialchars($_POST['message'] ?? '');
    
    if ($name && $email && $message) {
        $to = 'arno@cstiacoustics.com,richard@cstiacoustics.com';
        $subject = 'Contact Form Submission - CSTI acoustics';
        $body = "New contact form submission:\n\n";
        $body .= "Name: $name\n";
        $body .= "Email: $email\n";
        $body .= "Phone: $phone\n";
        $body .= "Company: $company\n\n";
        $body .= "Message:\n$message\n";
        
        $headers = "From: $email\r\n";
        $headers .= "Reply-To: $email\r\n";
        
        if (mail($to, $subject, $body, $headers)) {
            $form_status = 'success';
        } else {
            $form_status = 'error';
        }
    } else {
        $form_status = 'validation';
    }
}
?>

<section class="hero">
<div class="container">
<h1 data-bind="contact_page.hero_title">Contact Us</h1>
<p class="subhead" data-bind="contact_page.hero_subhead">Let's discuss your acoustical engineering needs</p>
</div>
</section>

<section class="services" style="padding: 4rem 0;">
<div class="container">

<?php if ($form_status === 'success'): ?>
<div style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; padding: 2rem; border-radius: 12px; text-align: center; margin-bottom: 3rem;">
<div style="font-size: 3rem; margin-bottom: 1rem;">✅</div>
<h3 style="color: white; margin-bottom: 1rem;">Message Sent Successfully!</h3>
<p style="color: rgba(255,255,255,0.95);">Thank you for contacting us. We'll get back to you shortly.</p>
</div>
<?php elseif ($form_status === 'error'): ?>
<div style="background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white; padding: 2rem; border-radius: 12px; text-align: center; margin-bottom: 3rem;">
<div style="font-size: 3rem; margin-bottom: 1rem;">❌</div>
<h3 style="color: white; margin-bottom: 1rem;">Error Sending Message</h3>
<p style="color: rgba(255,255,255,0.95);">Please try again or email us directly.</p>
</div>
<?php elseif ($form_status === 'validation'): ?>
<div style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; padding: 2rem; border-radius: 12px; text-align: center; margin-bottom: 3rem;">
<div style="font-size: 3rem; margin-bottom: 1rem;">⚠️</div>
<h3 style="color: white; margin-bottom: 1rem;">Please Fill Required Fields</h3>
<p style="color: rgba(255,255,255,0.95);">Name, email, and message are required.</p>
</div>
<?php endif; ?>

<div style="max-width: 900px; margin: 0 auto;">
<h2 style="text-align: center; margin-bottom: 3rem;" data-bind="contact_page.form_title">Get in Touch</h2>
<p style="font-size: 1.1rem; line-height: 1.8; text-align: center; margin-bottom: 4rem;" data-bind="contact_page.intro">
Have a question about our acoustical engineering services? Fill out the form below and we'll get back to you as soon as possible.
</p>

<!-- Contact Form -->
<div style="background: white; padding: 3rem; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);">
<form action="contact.php" method="POST" id="contactForm">
<input type="hidden" name="contact_form" value="1">

<!-- Name & Email Row -->
<!-- Name & Email Row -->
<div class="contact-form-row">
    <div style="margin-bottom: 1.5rem;">
        <label for="inputName" style="display: block; margin-bottom: 0.5rem; font-weight: 600; color: #1e293b;">Name</label>
        <input type="text" name="name" id="inputName" required style="width: 100%; padding: 0.75rem; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 1rem; transition: border-color 0.2s;" onfocus="this.style.borderColor='#667eea'" onblur="this.style.borderColor='#e2e8f0'">
    </div>
    <div style="margin-bottom: 1.5rem;">
        <label for="inputEmail" style="display: block; margin-bottom: 0.5rem; font-weight: 600; color: #1e293b;">Email</label>
        <input type="email" name="email" id="inputEmail" required style="width: 100%; padding: 0.75rem; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 1rem; transition: border-color 0.2s;" onfocus="this.style.borderColor='#667eea'" onblur="this.style.borderColor='#e2e8f0'">
    </div>
</div>

<!-- Phone & Company Row -->
<div class="contact-form-row">
<div style="margin-bottom: 1.5rem;">
<label style="display: block; margin-bottom: 0.5rem; font-weight: 600; color: #1e293b;">Phone</label>
<input type="tel" name="phone" style="width: 100%; padding: 0.75rem; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 1rem; transition: border-color 0.2s;" onfocus="this.style.borderColor='#667eea'" onblur="this.style.borderColor='#e2e8f0'">
</div>

<div style="margin-bottom: 1.5rem;">
<label style="display: block; margin-bottom: 0.5rem; font-weight: 600; color: #1e293b;">Company</label>
<input type="text" name="company" style="width: 100%; padding: 0.75rem; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 1rem; transition: border-color 0.2s;" onfocus="this.style.borderColor='#667eea'" onblur="this.style.borderColor='#e2e8f0'">
</div>
</div>

<!-- Message (Full Width) -->
<div style="margin-bottom: 1.5rem;">
<label style="display: block; margin-bottom: 0.5rem; font-weight: 600; color: #1e293b;">Message *</label>
<textarea name="message" id="inputMessage" required rows="6" style="width: 100%; padding: 0.75rem; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 1rem; transition: border-color 0.2s; resize: vertical;" onfocus="this.style.borderColor='#667eea'" onblur="this.style.borderColor='#e2e8f0'"></textarea>
</div>

<button type="submit" style="width: 100%; padding: 1rem; background: linear-gradient(135deg, #FF6B35 0%, #E85A2A 100%); color: white; border: none; border-radius: 8px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;" onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 10px 20px rgba(102, 126, 234, 0.4)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">
Send Message
</button>
</form>
</div>

<!-- Location Info -->
<div style="background: linear-gradient(rgba(10, 37, 64, 0.75), rgba(46, 92, 138, 0.75)), url(/images/houston_map.png) center/cover; color: white; text-shadow: 1px 1px 4px rgba(0,0,0,0.7); padding: 3rem; border-radius: 12px; margin-top: 4rem; text-align: center;">
<h3 style="color: white; margin-bottom: 1.5rem; font-size: 1.8rem;">Our Location</h3>
<p style="color: rgba(255,255,255,0.95); font-size: 1.2rem; line-height: 1.8;" data-bind="contact_page.location">
📍 Houston, Texas
</p>
<p style="color: rgba(255,255,255,0.9); margin-top: 1.5rem; font-size: 1rem;" data-bind="contact_page.location_desc">
Serving clients worldwide with expert acoustical engineering services
</p>
</div>

</div>
</section>

<?php include __DIR__ . '/templates/footer.php'; ?>
