<?= $this->extend('front/layout') ?>

<?= $this->section('content') ?>

<!-- Page Header -->
<section class="py-5" style="background-color: var(--primary-green); color: white;">
    <div class="container text-center py-4" data-aos="fade-down">
        <h1 class="display-4 font-serif fw-bold mb-0"><?= !empty($page['title']) ? esc($page['title']) : 'Contact Us' ?></h1>
        <?php if (!empty($page['heading'])): ?>
            <p class="lead mt-3 mb-0" style="color: rgba(255,255,255,0.8);"><?= esc($page['heading']) ?></p>
        <?php endif; ?>
    </div>
</section>

<!-- Dynamic Content -->
<?php if (!empty($page['content'])): ?>
<section class="pt-5 pb-2 bg-light">
    <div class="container">
        <div class="page-content text-center" data-aos="fade-up">
            <?= $page['content'] ?>
        </div>
    </div>
</section>
<?php endif; ?>

<!-- Contact Section -->
<section class="section-padding">
    <div class="container">
        <div class="row">
            <!-- Contact Info -->
            <div class="col-lg-5 mb-5 mb-lg-0" data-aos="fade-right">
                <div class="pe-lg-5">
                    <h5 style="color: var(--accent-gold); font-weight: 600;">GET IN TOUCH</h5>
                    <h2 class="font-serif mb-4" style="color: var(--primary-green);">Contact Information</h2>
                    <p class="text-muted mb-5">Have a question about our products or export processes? Feel free to contact us via the form or use our direct contact details below.</p>
                    
                    <div class="d-flex mb-4">
                        <div class="me-4">
                            <div class="d-flex align-items-center justify-content-center" style="width: 60px; height: 60px; background-color: rgba(43, 83, 41, 0.1); border-radius: 50%;">
                                <i class="bi bi-geo-alt fs-4" style="color: var(--primary-green);"></i>
                            </div>
                        </div>
                        <div>
                            <h5 class="mb-1" style="color: var(--earthy-brown);">Head Office</h5>
                            <p class="text-muted mb-0"><?= esc($settings['address'] ?? '123 Spice Route, Trade City') ?></p>
                        </div>
                    </div>
                    
                    <div class="d-flex mb-4">
                        <div class="me-4">
                            <div class="d-flex align-items-center justify-content-center" style="width: 60px; height: 60px; background-color: rgba(43, 83, 41, 0.1); border-radius: 50%;">
                                <i class="bi bi-envelope fs-4" style="color: var(--primary-green);"></i>
                            </div>
                        </div>
                        <div>
                            <h5 class="mb-1" style="color: var(--earthy-brown);">Email Us</h5>
                            <p class="text-muted mb-0"><?= esc($settings['contact_email'] ?? 'info@example.com') ?></p>
                        </div>
                    </div>
                    
                    <div class="d-flex mb-4">
                        <div class="me-4">
                            <div class="d-flex align-items-center justify-content-center" style="width: 60px; height: 60px; background-color: rgba(43, 83, 41, 0.1); border-radius: 50%;">
                                <i class="bi bi-telephone fs-4" style="color: var(--primary-green);"></i>
                            </div>
                        </div>
                        <div>
                            <h5 class="mb-1" style="color: var(--earthy-brown);">Call Us</h5>
                            <p class="text-muted mb-0"><?= esc($settings['phone'] ?? '+1234567890') ?></p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Contact Form -->
            <div class="col-lg-7" data-aos="fade-left">
                <div class="card border-0 p-4 p-md-5" style="border-radius: 20px; box-shadow: 0 15px 40px rgba(0,0,0,0.05);">
                    <h3 class="mb-4 font-serif" style="color: var(--primary-green);">Send an Enquiry</h3>
                    
                    <?php if(session()->getFlashdata('success')): ?>
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <?= session()->getFlashdata('success') ?>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    <?php endif; ?>
                    
                    <form action="<?= base_url('contact') ?>" method="post">
                        <?= csrf_field() ?>
                        <div class="row">
                            <div class="col-md-6 mb-4">
                                <label class="form-label fw-semibold text-muted">Your Name *</label>
                                <input type="text" name="name" class="form-control form-control-lg border-0 bg-light" required>
                            </div>
                            <div class="col-md-6 mb-4">
                                <label class="form-label fw-semibold text-muted">Email Address *</label>
                                <input type="email" name="email" class="form-control form-control-lg border-0 bg-light" required>
                            </div>
                            <div class="col-md-12 mb-4">
                                <label class="form-label fw-semibold text-muted">Phone Number</label>
                                <input type="text" name="phone" class="form-control form-control-lg border-0 bg-light">
                            </div>
                            <div class="col-md-12 mb-4">
                                <label class="form-label fw-semibold text-muted">Your Message *</label>
                                <textarea name="message" rows="5" class="form-control form-control-lg border-0 bg-light" required></textarea>
                            </div>
                            <div class="col-md-12">
                                <button type="submit" class="btn btn-gold btn-lg w-100 py-3 rounded-pill">Send Message</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<?= $this->endSection() ?>
