<?php
/**
 * Contact Page — Gmind Institute
 *
 * Contact info cards, contact form with CSRF, Google Map embed placeholder.
 *
 * Expected PHP variables:
 *   $csrfToken   — CSRF token string
 *   $currentPage — string 'contact'
 *   $title       — page title
 *   $errors      — array of validation errors (optional)
 *   $old         — array of old input values (optional)
 *   $settings    — key-value pairs from settings table (optional)
 */

$errors    = $errors    ?? [];
$old       = $old       ?? [];
$csrfToken = $csrfToken ?? '';
$settings  = $settings  ?? [];

$phone   = $settings['site_phone']    ?? '9305640290';
$email   = $settings['contact_email'] ?? $settings['site_email'] ?? 'info@gmind.in';
$address = $settings['address']       ?? '123 Education Street, New Delhi, India';
?>

<?php include __DIR__ . '/../layouts/header.php'; ?>

<!-- ============================================================
     Page Banner
     ============================================================ -->
<section class="page-banner" aria-label="Page heading">
    <div class="container">
        <h1>Get In Touch</h1>
        <p>We'd love to hear from you — reach out for any queries, feedback, or assistance</p>
        <nav class="breadcrumb" aria-label="Breadcrumb">
            <a href="<?= url('/') ?>">Home</a>
            <span aria-hidden="true">/</span>
            <span>Contact Us</span>
        </nav>
    </div>
</section>

<!-- ============================================================
     Contact Info Cards
     ============================================================ -->
<section class="contact-info-section section-white" aria-label="Contact information">
    <div class="container">
        <div class="contact-cards-grid">
            <!-- Address -->
            <div class="contact-info-card animate-on-scroll">
                <div class="contact-info-icon icon-navy" aria-hidden="true">
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
                </div>
                <h3>Our Address</h3>
                <p><?= htmlspecialchars($address, ENT_QUOTES, 'UTF-8') ?></p>
            </div>

            <!-- Phone -->
            <div class="contact-info-card animate-on-scroll" data-delay="100">
                <div class="contact-info-icon icon-scarlet" aria-hidden="true">
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
                </div>
                <h3>Phone</h3>
                <p><a href="tel:<?= htmlspecialchars($phone, ENT_QUOTES, 'UTF-8') ?>"><?= htmlspecialchars($phone, ENT_QUOTES, 'UTF-8') ?></a></p>
            </div>

            <!-- Email -->
            <div class="contact-info-card animate-on-scroll" data-delay="200">
                <div class="contact-info-icon icon-gold" aria-hidden="true">
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
                </div>
                <h3>Email</h3>
                <p><a href="mailto:<?= htmlspecialchars($email, ENT_QUOTES, 'UTF-8') ?>"><?= htmlspecialchars($email, ENT_QUOTES, 'UTF-8') ?></a></p>
            </div>

            <!-- Working Hours -->
            <div class="contact-info-card animate-on-scroll" data-delay="300">
                <div class="contact-info-icon icon-navy" aria-hidden="true">
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                </div>
                <h3>Working Hours</h3>
                <p>Monday - Saturday<br>9:00 AM - 7:00 PM</p>
            </div>
        </div>
    </div>
</section>

<!-- ============================================================
     Contact Form & Map Section
     ============================================================ -->
<section class="contact-form-section section-offwhite" aria-label="Contact form">
    <div class="container">
        <div class="contact-layout">
            <!-- Contact Form -->
            <div class="contact-form-wrapper">
                <h2>Send Us a Message</h2>

                <?php if (!empty($errors)): ?>
                <div class="alert alert-error" role="alert">
                    <strong>Please fix the following errors:</strong>
                    <ul>
                        <?php foreach ($errors as $error): ?>
                        <li><?= htmlspecialchars($error, ENT_QUOTES, 'UTF-8') ?></li>
                        <?php endforeach; ?>
                    </ul>
                </div>
                <?php endif; ?>

                <form method="POST" action="<?= url('/contact') ?>" class="contact-form" novalidate>
                    <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($csrfToken, ENT_QUOTES, 'UTF-8') ?>">

                    <div class="form-grid">
                        <div class="form-group">
                            <label for="name">Full Name <span class="required">*</span></label>
                            <input type="text" id="name" name="name" required placeholder="Enter your name" value="<?= htmlspecialchars($old['name'] ?? '', ENT_QUOTES, 'UTF-8') ?>">
                        </div>
                        <div class="form-group">
                            <label for="email">Email Address <span class="required">*</span></label>
                            <input type="email" id="email" name="email" required placeholder="Enter your email" value="<?= htmlspecialchars($old['email'] ?? '', ENT_QUOTES, 'UTF-8') ?>">
                        </div>
                        <div class="form-group">
                            <label for="phone">Phone Number</label>
                            <input type="tel" id="phone" name="phone" placeholder="Enter your phone number" value="<?= htmlspecialchars($old['phone'] ?? '', ENT_QUOTES, 'UTF-8') ?>">
                        </div>
                        <div class="form-group">
                            <label for="subject">Subject <span class="required">*</span></label>
                            <input type="text" id="subject" name="subject" required placeholder="Enter subject" value="<?= htmlspecialchars($old['subject'] ?? '', ENT_QUOTES, 'UTF-8') ?>">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="message">Message <span class="required">*</span></label>
                        <textarea id="message" name="message" rows="6" required placeholder="Type your message here..."><?= htmlspecialchars($old['message'] ?? '', ENT_QUOTES, 'UTF-8') ?></textarea>
                    </div>

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

            <!-- Map -->
            <div class="contact-map-wrapper">
                <h2>Find Us on Map</h2>
                <div class="contact-map">
                    <iframe
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3502.0!2d77.2!3d28.6!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMjjCsDM2JzAwLjAiTiA3N8KwMTInMDAuMCJF!5e0!3m2!1sen!2sin!4v1"
                        width="100%"
                        height="400"
                        style="border:0; border-radius:12px;"
                        allowfullscreen=""
                        loading="lazy"
                        referrerpolicy="no-referrer-when-downgrade"
                        title="Gmind Institute Location"
                    ></iframe>
                </div>
            </div>
        </div>
    </div>
</section>

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