Viên ngọc phương Đông

<?php
/**
 * Template Name: Contact Page
 */
get_header(); ?>

<div class="breadcrumbs">
    <div class="breadcrumbs-inner">
        <a href="<?php echo home_url('/'); ?>">Home</a>
        <span class="separator">›</span>
        <span>Contact</span>
    </div>
</div>

<section class="section">
    <div class="container">
        <div class="section-header reveal">
            <span class="section-label">Get In Touch</span>
            <h1>Contact Us</h1>
            <p>Have a question about a product or need help finding the right part? We're here to help.</p>
        </div>

<div class="contact-grid">
            <div class="contact-card reveal">
                <div class="contact-card-icon">
                    <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <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:0274321966">0274 321 966</a></p>
                <p style="font-size:0.8rem;color:var(--color-text-light);margin-top:0.25rem;">Alastair Kermode</p>
            </div>
            <div class="contact-card reveal">
                <div class="contact-card-icon">
                    <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <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:sales@iel.nz">sales@iel.nz</a></p>
            </div>
            <div class="contact-card reveal">
                <div class="contact-card-icon">
                    <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <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>Warehouse</h3>
                <p>710B Hudson's Road RD4<br>Christchurch 7674</p>
                <p style="font-size:0.8rem;color:var(--color-text-light);margin-top:0.25rem;">By appointment only</p>
            </div>
        </div>

<div class="contact-form-section">
            <div class="contact-form-box reveal">
                <h2 style="margin-bottom:0.5rem;">Send Us a Message</h2>
                <p style="color:var(--color-text-light);font-size:0.9rem;margin-bottom:1.5rem;">We'll get back to you as
                    soon as possible.</p>
                <form id="contact-form">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="contact-name">Full Name *</label>
                            <input type="text" id="contact-name" name="name" required>
                        </div>
                        <div class="form-group">
                            <label for="contact-email">Email *</label>
                            <input type="email" id="contact-email" name="email" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="contact-phone">Phone</label>
                        <input type="tel" id="contact-phone" name="phone">
                    </div>
                    <div class="form-group">
                        <label for="contact-message">Message *</label>
                        <textarea id="contact-message" name="message" rows="5" required></textarea>
                    </div>
                    <div class="form-submit">
                        <button type="submit" class="btn btn-primary btn-lg">Send Message →</button>
                    </div>
                    <div class="form-success" id="contact-success" style="display:none;">
                        <svg width="48" height="48" fill="none" stroke="currentColor" stroke-width="2"
                            viewBox="0 0 24 24">
                            <path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
                            <polyline points="22 4 12 14.01 9 11.01" />
                        </svg>
                        <h3>Message Sent!</h3>
                        <p>Thanks for reaching out. We'll get back to you shortly.</p>
                    </div>
                </form>
            </div>
            <div class="map-placeholder reveal">
                <iframe
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2891.5!2d172.5!3d-43.53!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNDPCsDMxJzQ4LjAiUyAxNzLCsDMwJzAwLjAiRQ!5e0!3m2!1sen!2snz!4v1"
                    allowfullscreen="" loading="lazy"></iframe>
            </div>
        </div>
    </div>
</section>

<?php get_footer(); ?>